CSS offset-positie eigenschap

Vorige pagina offset-path
Volgende pagina offset-rotate

Definitie en gebruik

offset-position De eigenschap specificeert de initiële positie van het element op het pad.

Als offset-path Als de functie niet de initiële positie van zichzelf heeft gespecificeerd, dan offset-position De waarde bepaalt de initiële positie van het element tijdens het bewegen langs het offset-pad.

Voorbeeld

Voorbeeld 1

De initiële positie van het gespecificeerde element moet in de rechterbenedenhoek zijn:

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

Probeer het zelf uit

Voorbeeld 2

Bekijk verschillende beginposities van de offset:

#square1 {
  width: 40px;
  height: 40px;
  background: roze;
  text-align:center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: rood;
  text-align:center;
  offset-position: top right;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: geel;
  text-align:center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: cyaan;
  text-align:center;
  offset-position: auto;
  offset-path: ray(95deg);
}
#square5 {
  width: 40px;
  height: 40px;
  background: lavendel;
  text-align:center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

Probeer het zelf uit

CSS Syntax

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

Eigenschapswaarde

Waarde	Beschrijving
normal	Stel de beginpositie van de offset in op 50% 50% van de inheemse blok. Standaardwaarde.
auto	Stel de beginpositie van de offset in op de linkerbovenhoek van het elementkader.
position	Specificeer een x/y-coördinaat om het element ten opzichte van de rand van zijn kader te plaatsen. Je kunt 1 tot 4 waarden gebruiken om de positie te definiëren.
initial	Deze eigenschap instellen op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap overnemen van de ouder element. Raadpleeg inherit.

Technische details

Standaardwaarde:	normal
Inheritantie:	Nee
Animatie maken:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript Syntax:	object.style.offsetPosition="auto"