Absolut positionering utan koordinater i CSS
Det är faktiskt inte obligatoriskt att ange koordinater vid absolut
positionering. Om ett element helt enkelt får position med värdet
absolute, så blir det absolutpositionerat,
men kommer att förbli på samma plats där det
stod. Samtidigt kommer alla andra element att
bete sig som om vårt element inte finns
och kan tränga in på det.
Låt oss titta på exempel.
Exempel
Låt oss först skapa tre block utan positionering och mellan dem lite text:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Exempel
Och låt oss nu lägga till absolute till det gröna blocket.
Som ett resultat kommer detta block att förbli på plats,
medan alla element underifrån kommer att bete sig som
om vårt element inte finns och tränger in på det:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Exempel
Låt oss nu lägga till egenskapen left,
utan att lägga till vertikal positionering. Som ett resultat
kommer vårt block horisontellt att ställa sig på det angivna
värdet, och vertikalt kommer det att förbli
där det stod:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* lägger till horisontell position */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Exempel
Låt oss nu, tvärtom, lägga till egenskapen
top, utan att lägga till horisontell positionering.
Som ett resultat kommer vårt block vertikalt att ställa sig
på det angivna värdet, och horisontellt -
kommer det att förbli där det stod:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* lägger till vertikal position */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
