Frontend Academy · Oppitunti

Sijoittelu: relative, absolute, fixed ja sticky

Irrota elementtejä normaalista vuosta position-arvoilla, jotta voit asettaa sisältöä päällekkäin, kiinnittää otsakkeita ja luoda kiinnittyviä sivupalkkeja.

Oppitunti 4/413 vaihetta

Sijoittelu: relative, absolute, fixed ja sticky on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Normaali dokumenttivirta

Oletusarvoisesti elementit noudattavat normaalia dokumenttivirtaa: lohkoelementit asettuvat pystysuoraan päällekkäin ja tekstin sisäiset elementit virtaavat vaakasuoraan tekstin joukossa. position-ominaisuuden avulla voit irrottaa elementin tästä virrasta esimerkiksi peittokuvia, kiinteitä otsakkeita ja työkaluvihjeitä varten.

position: static (oletusarvo)

Jokaisen elementin lähtöarvo on position: static. Tämä tarkoittaa, että se sijoitetaan normaalin dokumenttivirran mukaisesti. Ominaisuuksilla top, right, bottom ja left ei ole vaikutusta static-elementteihin.

position: relative

position: relative pitää elementin normaalissa virrassa, mutta mahdollistaa sen siirtämisen alkuperäisestä sijainnistaan ominaisuuksilla top, right, bottom ja left. Tärkeää on, että se luo sijoittelukontekstin absoluuttisesti sijoitetuille jälkeläiselementeille.

.card {
  position: relative;
  top: 10px;    /* shift 10px down from original position */
  left: -5px;   /* shift 5px left */
}

position: absolute

position: absolute poistaa elementin normaalista asetteluvirrasta. Se sijoitetaan lähimmän positionoidun esi-isän suhteen (eli elementin, jonka position-arvo on jokin muu kuin static). Jos positionoitua esi-isää ei ole, viitekohtana on viewport.

.card {
  position: relative; /* creates context */
}
.card .badge {
  position: absolute;
  top: 12px;
  right: 12px; /* top-right corner of .card */
}

z-index-ominaisuus

Positionoidut elementit voivat olla päällekkäin. Hallitkaa pinoamisjärjestystä z-index-ominaisuudella. Mitä suurempi z-index-arvo, sitä ylempänä elementti on. Tämä toimii vain positionoiduilla elementeillä (ei static-elementeillä). Ominaisuus luo uuden pinoamiskontekstin.

.tooltip {
  position: absolute;
  z-index: 100; /* above other content */
}
.modal {
  position: fixed;
  z-index: 1000; /* above tooltip */
}

position: fixed

position: fixed poistaa elementin normaalista asetteluvirrasta ja kiinnittää sen viewportiin. Se ei vieri sivun mukana. Se sopii erinomaisesti kiinteisiin otsakkeisiin, leijuviin toimintopainikkeisiin ja evästebannereihin.

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: white;
  z-index: 50;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

position: sticky

position: sticky on yhdistelmä kahdesta toimintatavasta: elementti vierii sivun mukana, kunnes se saavuttaa top- tai bottom-arvolla määritetyn kynnyksen, ja kiinnittyy sen jälkeen paikalleen. Se sopii pitkien taulukoiden osioiden otsakkeisiin tai sivupalkkeihin, jotka kiinnittyvät otsakkeen ohitettua.

.sidebar {
  position: sticky;
  top: 80px; /* sticks 80px from top after scroll */
  align-self: flex-start;
}

Keskittäminen position: absolutella

Klassinen tekniikka: yhdistäkää position: absolute; top: 50%; left: 50% ja transform: translate(-50%, -50%), jolloin elementti keskitetään täydellisesti sen positionoituun vanhempielementtiin.

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  background: white;
  border-radius: 12px;
}

overflow: hidden leikkaa absoluuttisesti sijoitetut lapsielementit

Absoluuttisesti sijoitettu lapsielementti voi oletusarvoisesti ulottua vanhempansa rajojen ulkopuolelle. Kun vanhempaan lisätään overflow: hidden, kaikki sen laatikon ulkopuolinen sisältö leikataan pois. Tämä on hyödyllistä esimerkiksi korttien kuvan tehosteissa ja tunnisteiden leikkaamisessa.

Sudenkuoppa: tahattomat pinoamiskontekstit

Jotkin ominaisuudet luovat tahattomasti pinoamiskonteksteja: transform, filter ja isolation: isolate. Tämä voi aiheuttaa z-index-ristiriitoja, joissa z-index: 9999 -elementti on silti toisen elementin takana, koska se kuuluu alempaan pinoamiskontekstiin.

Milloin kutakin sijoittelua käytetään

relative: siirtymät ja sijoittelukonteksti. absolute: tunnisteet, työkaluvihjeet ja vanhempaan suhteutetut peittotasot. fixed: pysyvät otsakkeet, modaalit ja toast-ilmoitukset. sticky: osioiden otsakkeet ja sivupalkin navigointi, joka seuraa vieritystä. Välttäkää positionia asetteluihin — käyttäkää Flexiä tai Gridiä.

Pikatarkistus

Elementillä on position: absolute; top: 0; right: 0;. Mihin se sijoittuu, jos sen vanhempielementillä on position: relative?

Vastaa interaktiivisessa oppitunnissa

Kertaus: CSS:n sijoittelu

static on oletusarvo. relative siirtää elementtiä poistamatta sitä normaalista virrasta ja luo sijoittelukontekstin. absolute poistaa elementin virrasta ja sijoittaa sen lähimmän positionoidun esi-isän suhteen. fixed kiinnittää elementin viewportiin. sticky vierii ensin ja kiinnittyy sitten. Hallitkaa päällekkäisyyksien järjestystä z-indexillä.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Sijoittelu: relative, absolute, fixed ja sticky” ilmainen?

Kyllä – oppitunnin ”Sijoittelu: relative, absolute, fixed ja sticky” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Sijoittelu: relative, absolute, fixed ja sticky”?

Irrota elementtejä normaalista vuosta position-arvoilla, jotta voit asettaa sisältöä päällekkäin, kiinnittää otsakkeita ja luoda kiinnittyviä sivupalkkeja. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Sijoittelu: relative, absolute, fixed ja sticky”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Valitsimet ja kaskadi
Värit, typografia ja laatikkomalli
Display: block-, inline-, flex- ja grid-perusteet
Sijoittelu: relative, absolute, fixed ja sticky

← Takaisin: Frontend Academy