position ohjaa kuinka elementti sijoitetaan ja ovatko siirtymäominaisuudet (top/right/bottom/left) voimassa.
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute sijoittaa elementin suhteessa sen lähimpään sijoitettuun esi-isään (mihin tahansa muuhun kuin static). Joten asetat position: relative pääelementtiin tehdäksesi siitä vertailupisteitä:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
Tämä relative-parent / absolute-child -kuvio on kaikkialla: merkinnät, avattavat valikot, työkaluvihjeet, sulkemispainikkeet.
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0), sitten pysyy paikallaan kun sen säilö on näkyvissä — loistava osion otsikoille.absolute/fixed -elementit poistetaan normaalivirroista, joten ne eivät varaa tilaa — sisaruselementit käyttäytyvät kuin ne eivät olisi olemassa, mikä voi aiheuttaa päällekkäisyyttä. Suunnittele sen mukaan (esim. lisää padding kompensoidaksesi kiinteän navigaatiopalkin).
position on olennainen peittoteille, kiinteille otsikoille, modaalille, avattaville valikoille ja merkinnöille.
Relative-parent/absolute-child -suhde ja fixed-vs-sticky -ero ovat käytännöllinen ydin, jota käytät jatkuvasti.