Propiedad offset-position de CSS

La propiedad offset-position especifica la posición inicial de la ruta de desplazamiento (offset path).

Si la propiedad position se especifica con el valor "static", se ignorará el offset-position.

El offset-position también se ignora si el offset-path es un "geometry-box" o una "basic shape".

advertencia
Esta propiedad es una tecnología experimental.

Valor inicial	auto
Se aplica a	Elementos transformables.
Heredado	No.
Animable	Sí.
Versión	Motion Path Module Level 1
Sintaxis DOM	Object.style.offsetPosition = "auto";

Sintaxis

Sintaxis de CSS offset-position

css

offset-position: auto | <position> | initial | inherit;

Ejemplo de la propiedad offset-position:

Ejemplo de código CSS offset-position

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #element1 {
        position: relative;
        width: 300px;
        height: 300px;
        border: 2px solid #666;
      }
      #element2 {
        width: 100px;
        height: 100px;
        background-color: #1c87c9;
        position: absolute;
        top: 90px;
        left: 100px;
        offset-position: 100px 100px;
        offset-anchor: center;
        offset-path: ray(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Offset-position property example</h2>
    <div id="element1">
      <div id="element2"></div>
    </div>
  </body>
</html>

Try it Yourself »

Resultado

Lista de valores de CSS offset-position

Valores

Valor	Descripción
auto	Indica que la posición inicial es la posición del cuadro especificada con la propiedad position.
`<position>`	Especifica la posición inicial, con el bloque contenedor como área de posicionamiento y un punto sin dimensiones (cuadro de tamaño cero) como área del objeto. Este valor se puede especificar usando uno a cuatro valores. Si se define un valor, se asume que el segundo es center. Si se especifican dos valores no clave, el primero representa la posición horizontal y el segundo la posición vertical. Si se especifican tres o cuatro valores, los valores de longitud-porcentaje son desplazamientos para los valores de palabra clave precedentes (Lea la propiedad background-position para más información).
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedad offset-position de CSS ​

Sintaxis ​

Ejemplo de la propiedad offset-position: ​

Resultado ​

Valores ​

Práctica ​

Propiedad offset-position de CSS

Sintaxis

Ejemplo de la propiedad offset-position:

Resultado

Valores

Práctica