Absoluuttinen asemointi ja containing block
Asemointia elementit absoluuttisesti suhteessa lähimpään asemoituun esivanhempaan.
Absoluuttinen asemointi ja containing block on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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 CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
position: absolute
Absoluuttisesti positioitu elementti poistetaan normaalista asiakirjavirrasta. Muut elementit toimivat kuin sitä ei olisi olemassa. Elementti sijoitetaan suhteessa lähimpään positioituun esivanhempaan.
Sisältävä lohko
Absoluuttisesti positioidun elementin sisältävä lohko on sen lähin esivanhempi, jonka position-arvo on jokin muu kuin static. Jos tällaista esivanhempaa ei ole, elementti sijoitetaan suhteessa alkuperäiseen sisältävään lohkoon (näyttöalueeseen).
Sisältävän lohkon määrittäminen
Yleisin malli on lisätä vanhemmalle position: relative, jotta se sisältää absoluuttisesti positioidut lapsielementit.
<div class="card">Card content<span class="badge">Badge</span></div>
Siirtymäominaisuudet absolute-asetuksen kanssa
Absoluuttisessa asemoinnissa top/right/bottom/left-arvot mitataan sisältävän lohkon täytereunasta.
<div class="tooltip-wrap">Hover target<span class="tooltip">I'm below the parent</span></div>
Keskittäminen absolute-asetuksella
Absoluuttisesti positioitujen elementtien perinteinen keskitystekniikka:
<div class="center-wrap"><div class="centered">Perfectly centered</div></div>
Absolute-elementtien leveys ja korkeus
Absoluuttisesti positioidut elementit mukautuvat oletusarvoisesti sisältönsä mittoihin (ellei leveyttä tai korkeutta ole määritetty). Ne eivät enää veny täyttämään säilön koko leveyttä lohkoelementtien tavoin.
Venytteleminen kaikilla reunoilla
Kun kaikki neljä reunaa asetetaan arvoon 0, absoluuttisesti positioitu elementti venyy täyttämään sisältävän lohkonsa:
<div class="stretch-wrap"><div class="overlay">Overlay covers all edges</div></div>
inset-lyhennys
inset-ominaisuus on lyhennysominaisuus ominaisuuksille top, right, bottom ja left yhdessä:
<div class="cover-wrap"><div class="full-cover"></div></div>
Pinoaminen z-index-arvolla
Absoluuttisesti positioidut elementit osallistuvat pinoamiskonteksteihin. Määrittäkää z-index-arvolla, mitkä päällekkäiset absoluuttiset elementit näkyvät päällimmäisinä.
<div class="stack-wrap"><div class="box-a">Behind</div><div class="tooltip">On top (z-index:100)</div></div>
Yleinen sudenkuoppa: vanhempi unohtuu
Jos unohdatte lisätä vanhemmalle position: relative -asetuksen, absoluuttinen lapsielementti sijoitetaan lähimmän jo positioidun esivanhemman suhteen — usein näyttöalueen. Tarkistakaa aina sisältävä lohko.
Absolute flex- ja grid-säilöissä
Flex- tai grid-säilö ei ole automaattisesti positioitu elementti. Teidän on silti lisättävä siihen erikseen position: relative, jotta siitä tulee absoluuttisten lapsielementtien sisältävä lohko.
Pikatarkistus
Minne absoluuttisesti positioitu elementti sijoitetaan, jos millään sen esivanhemmista ei ole muuta position-arvoa kuin static?
Kertaus
Absoluuttisesti positioidut elementit poistuvat asiakirjavirrasta ja sijoitetaan suhteessa lähimpään ei-staattiseen esivanhempaan. Lisätkää vanhemmalle aina position: relative, jotta voitte hallita sijoittelua. Käyttäkää arvoa inset: 0, jos haluatte venyttää absoluuttisen elementin täyttämään säilönsä.
Opi CSS 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
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Absoluuttinen asemointi ja containing block” ilmainen?
Kyllä – oppitunnin ”Absoluuttinen asemointi ja containing block” 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 CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Absoluuttinen asemointi ja containing block”?
Asemointia elementit absoluuttisesti suhteessa lähimpään asemoituun esivanhempaan. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Absoluuttinen asemointi ja containing block”-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ä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS 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
- Staattinen ja suhteellinen asemointi
- Absoluuttinen asemointi ja containing block
- Kiinteä ja tahmea asemointi
- Z-index ja pinoamiskonteksti