DigExp - Web/07 - Positioning

Position: static

Ieder element die je tot nu toe gerendered hebt, was al static!

Want static is de default van een browser!

* {
  padding: 2rem;
}

position: static;

Position

Position: static;

Default; Ieder element op de pagina heeft als default position "static";

* {
  padding: 2rem;
}

position: static;

position: relative

Position: relative

Als een element position: relative krijgt, heeft dit initieel geen invloed op het element.

* {
  padding: 2rem;
}

position: static;

position: relative;

Wel zijn er 4 nieuwe properties mogelijk op relatieve gepositioneerde elementen. (top, right, bottom, left)

position: static;

position: relative;

top: -3rem;

* {
  padding: 2rem;
}

.orange-el {
  top: -3rem;
}

Position: relative

Deze properties gedragen zich anders dan margin properties. Static elementen schuiven met elkaar mee!

* {
  padding: 2rem;
}

.orange-el {
  margin-top: -3rem;
}

position: static;

position: relative;

margin-top: -3rem;

Position: relative

Terwijl static elementen gaan schuiven, gaan relatieve elementen hun originele ruimte blijven opeisen.

position: static;

position: relative;

top: -3rem;

left: 2rem;

* {
  padding: 2rem;
}

.orange-el {
  top: -3rem;
  left: 2rem;
}

* {
  padding: 2rem;
}

* {
  padding: 2rem;
}

.orange-el {
  top: -3rem;
  left: 2rem;
}

Position: relative

Zelf al staan ze niet meer zichtbaar in beeld, blijven ze hun plaats opeisen.

position: static;

* {
  padding: 2rem;
}

.orange-el {
  top: -3rem;
  left: 2rem;
}

* {
  padding: 2rem;
}

* {
  padding: 2rem;
}

.orange-el {
  position: relative;
  top: -3rem;
  left: -200rem;
}

Position: relative

position: absolute

Een element met position: absolute, eist niet langer zijn eigen ruimte op, en zal zich positioneren t.o.v. de <body>.

* {
  padding: 2rem;
}

position: static;

position: absolute;

<body>

</body>

...of ten opzichte van de eerste parent die relatief gepositioneerd is.

* {
  padding: 2rem;
}

.blue-el {
  position: relative;
}

.orange-el {
  left: 1rem;
  top: 1rem;
}

position: static;

position: absolute;

<body>

</body>

position: relative;

position: absolute

relative vs absolute

Dus:

Relatief gepositioneerde elementen veranderen de flow van het document niet
Absoluut gepositioneerde elementen zitten niet langer in een opeenvolgende flow

position : sticky

Position: sticky

Position: sticky; Plakt aan de rand van het scherm, wanneer het tegen het scherm komt.

Position: sticky

position: fixed

Position: fixed

Position: fixed; Blijft fixed ten opzicht van het browservenster, ongeacht de scrollpositie.

z-index

Nu we elementen over andere elementen gaan positioneren, kunnen we ook kiezen welke elementen vanboven liggen met de z-index property

z-index

DigExp - Web/07 - Positioning

More from Lecturer GDM