Absoluuttinen Asemointi CSS:ssä
Käyttämällä absoluuttista sijoittelua poistetaan elementti oletusasiakirjavirrasta, jolloin muut viereiset elementit voivat täyttää syntyneen aukon. Elementin top, left, bottom ja right -sijoitteluarvot lasketaan suhteessa lähimpään esi-isään, jolla on muu kuin staattinen sijoittelu. Jos tällaista esi-isää ei ole, arvot määritellään <body>-elementin reunojen perusteella.
position: absolute;
Yleisesti absoluuttista sijoittelua käytetään yhdessä suhteellisen sijoittelun kanssa, koska haluamme sijoittaa elementin suhteessa toiseen asiakirjavirrassa olevaan elementtiin.
Tarkastellaan seuraavaa esimerkkiä. Tehtävänä on asettaa kaupungin nimi (<span>-elementti, jolla on description-luokka) kaupunkikortin (<div>-elementti, jolla on card-luokka) oikeaan yläkulmaan. Kiinnitä huomiota position-ominaisuuteen eri elementeissä.
index.html
index.css
Tässä esimerkissä .description-elementit sijoitetaan absoluuttisesti .card-elementtien sisälle, koska position: relative;-elementtiin on asetettu .card. Tämä sijoittelu asettaa kaupunkien nimet jokaisen kortin oikeaan yläkulmaan.
Elementti voidaan siirtää suhteessa toiseen elementtiin. Miten tämä toimii? Meidän täytyy asettaa position: relative; sille elementille, joka on sen elementin esivanhempi, jonka haluamme sijoittaa absoluuttisesti. Muussa tapauksessa elementti sijoitetaan suhteessa <body>-elementtiin.
Huomio
Kun määrität
top,left,rightjabottom-ominaisuudet absoluuttisesti sijoitetulle elementille, selain laskee ne suhteessa suhteellisesti sijoitetun elementin reunoihin. Tämä voidaan nähdä ikään kuin marginaalina lapsielementille vanhemman sisällä.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 2.04Absoluuttinen Asemointi CSS:ssä
Pyyhkäise näyttääksesi valikon
Käyttämällä absoluuttista sijoittelua poistetaan elementti oletusasiakirjavirrasta, jolloin muut viereiset elementit voivat täyttää syntyneen aukon. Elementin top, left, bottom ja right -sijoitteluarvot lasketaan suhteessa lähimpään esi-isään, jolla on muu kuin staattinen sijoittelu. Jos tällaista esi-isää ei ole, arvot määritellään <body>-elementin reunojen perusteella.
position: absolute;
Yleisesti absoluuttista sijoittelua käytetään yhdessä suhteellisen sijoittelun kanssa, koska haluamme sijoittaa elementin suhteessa toiseen asiakirjavirrassa olevaan elementtiin.
Tarkastellaan seuraavaa esimerkkiä. Tehtävänä on asettaa kaupungin nimi (<span>-elementti, jolla on description-luokka) kaupunkikortin (<div>-elementti, jolla on card-luokka) oikeaan yläkulmaan. Kiinnitä huomiota position-ominaisuuteen eri elementeissä.
index.html
index.css
Tässä esimerkissä .description-elementit sijoitetaan absoluuttisesti .card-elementtien sisälle, koska position: relative;-elementtiin on asetettu .card. Tämä sijoittelu asettaa kaupunkien nimet jokaisen kortin oikeaan yläkulmaan.
Elementti voidaan siirtää suhteessa toiseen elementtiin. Miten tämä toimii? Meidän täytyy asettaa position: relative; sille elementille, joka on sen elementin esivanhempi, jonka haluamme sijoittaa absoluuttisesti. Muussa tapauksessa elementti sijoitetaan suhteessa <body>-elementtiin.
Huomio
Kun määrität
top,left,rightjabottom-ominaisuudet absoluuttisesti sijoitetulle elementille, selain laskee ne suhteessa suhteellisesti sijoitetun elementin reunoihin. Tämä voidaan nähdä ikään kuin marginaalina lapsielementille vanhemman sisällä.
Kiitos palautteestasi!
