Propriedade offset-position do CSS

Página anterior offset-path
Próxima página offset-rotate

Definição e uso

offset-position a propriedade especifica a posição inicial do elemento no caminho.

Se offset-path Se a função não especificar sua própria posição inicial, offset-position o valor determina a posição inicial do elemento ao se mover ao longo do caminho de deslocamento.

Exemplo

Exemplo 1

A posição inicial do elemento especificado deve ser no canto inferior direito:

#square {
  width: 60px;
  height: 60px;
  background: azul;
  offset-position: bottom right;
  offset-path: ray(45deg);
}

Experimente você mesmo

Exemplo 2

Veja diferentes posições de início de offset:

#square1 {
  width: 40px;
  height: 40px;
  background: rosa;
  text-align: center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: vermelho;
  text-align: center;
  offset-position: top right;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: amarelo;
  text-align: center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: ciano;
  text-align: center;
  offset-position: auto;
  offset-path: ray(95deg);
}
#square5 {
  width: 40px;
  height: 40px;
  background: lavanda;
  text-align: center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

Experimente você mesmo

Sintaxe do CSS

offset-position: auto|normal|position|initial|inherit;

Valor da propriedade

Valor	Descrição
normal	Defina o início da offset como 50% 50% do bloco contido. Valor padrão.
auto	Defina o início da offset como o canto superior esquerdo da caixa do elemento.
position	Especifique um eixo x/y para posicionar o elemento em relação à margem de sua caixa. Pode usar de 1 a 4 valores para definir a posição.
initial	Defina essa propriedade como seu valor padrão. Veja: initial.
inherit	Herda essa propriedade do elemento pai. Veja: inherit.

Detalhes técnicos

Valor padrão:	normal
Herança:	Não
Produção de animação:	Suporte. Veja:Propriedades relacionadas a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.offsetPosition="auto"