Deel 6: The power of design
Web Design
Positioning
Positioning in css
Position
Position is een property die we gebruiken om in te stellen hoe een item zich gedraagt op de webpagina:
- Volgt het item de normale flow van de pagina?
- Houdt het item geen rekening met andere items?
- Scrollt het item mee?
- Blijft het item "plakken" op een bepaalde plek?
Position: static
Position: static
De default instelling van de browser: elk element is statisch.
Het item volgt de normale flow van de html
position: relative
Position: relative
Als een element position: relative krijgt, heeft dit initieel geen invloed op het element.
.green-box {
position: relative;
}Position: relative
Maar we kunnen het element nu verplaatsen met top, bottom, left, right. Het element verplaatst zich t.o.v. zijn originele plaats.
.green-box {
position: relative;
left: 2rem;
top: 4rem;
}
Position: relative
Ookal werd het element verplaatst, de originele ruimte in de flow blijft wel ingenomen. Andere static elementen verschuiven dus niet.
.green-box {
position: relative;
left: 2rem;
top: 4rem;
}
Position: relative
Zelfs als we het element zo verschuiven dat het niet meer zichtbaar is in het browserscherm, blijft de originele ruimte in de flow ingenomen.
.green-box {
position: relative;
left: -200rem;
top: -400rem;
}
position: absolute
position: absolute
Bij position:absolute wordt het element uit de normale flow van het document genomen. Zijn originele plaats blijft ook niet meer behouden.
position:static
position:absolute
position: absolute
Het item positioneert zich nu t.o.v. de html tag (=het browserscherm)
.green-box {
position: absolute;
left: 12rem;
top: 10rem;
}
position: absolute
Het item positioneert zich nu t.o.v. de html tag (=het browserscherm) of de eerste parent met position:relative.
.yellow-box {
position: relative;
}
.green-box {
position: absolute;
left: 2remrem;
top: 2rem;
}
<div class="yellow-box">
<div class="green-box"></div>
</div>relative vs absolute
position:static
position:absolute
position:relative
Voorbeelden van position: absolute
Tags of like-buttons op cards of afbeeldingen
Voorbeelden van position: absolute
Pop-up menu's
position: fixed
Position: fixed
Bij position:fixed blijft het element staan op zijn positie t.o.v. het browservenster. Hij behoudt zijn positie bij het scrollen.
Position: fixed
Wanneer je position:fixed toevoegt, verdwijnt het item uit de flow van de html, m.a.w zijn originele ruimte wordt niet behouden en andere elementen houden er geen rekening mee
navbar met position:static
navbar met position:fixed
position: sticky
Position: sticky
Een element met position:sticky...
- Gedraagt zich eerst relative (staat in de gewone flow)
- maar zodra je voorbij een bepaald scrollpunt komt, wordt het vastgeplakt (sticky) op een positie, net zoals fixed
Position: sticky
.sticky-nav {
position: sticky;
top: 0; /* Blijft plakken aan top van viewport */
background: white;
z-index: 100;
}
.sidebar {
position: sticky;
top: 10rem; /* 10rem van top wanneer sticky */
height: fit-content;
}Overzicht
Overzicht
| Blijft in flow | top/bottom/left/ right | Positioneert ten aanzien van | |
|---|---|---|---|
| static | originele plek in de flow | ||
| relative | originele plek in de flow | ||
| absolute | 1ste niet static parent of body | ||
| sticky | originele plek in de flow + viewport bij scroll | ||
| fixed | viewport |
Overzicht
z-index
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
Hoe hoger de waarde, hoe meer het item naar boven wordt geplaatst. Hoe lager de waarde, hoe verder naar achter.
.orange-box {
z-index: 20;
}
.green-box {
z-index: -2;
}z-index
Z-index werkt niet op static elementen, alleen op items die als position de volgende instelling hebben:
- Relative
- Absolute
- Fixed
- Sticky
z-index