Absolut positionering uden koordinater i CSS
Faktisk er det ikke obligatorisk at angive koordinater ved absolut
positionering. Hvis et element blot skrives med position med værdien
absolute, vil det blive absolut positioneret,
men forblive på samme sted, hvor det
stod. Samtidig vil alle andre elementer
opføre sig, som om vores element ikke er der,
og de kan overlappe det.
Lad os se på nogle eksempler.
Eksempel
Til at starte med, lad os blot lave tre blokke uden positionering og imellem dem noget tekst:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<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;
}
:
Eksempel
Og lad os nu tilføje absolute til den grønne blok.
Som et resultat vil denne blok forblive på pladsen,
mens alle elementerne under vil opføre sig som om,
vores element ikke er der og vil overlappe det:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<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;
}
:
Eksempel
Lad os nu tilføje egenskaben left,
uden at tilføje position efter vertikalen. Som et resultat
vil vores blok i horisontalen indtage den angivne
værdi, mens den i vertikalen forbliver stående
der, hvor den stod:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* tilføjer position efter horisontalen */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Eksempel
Lad os nu, omvendt, tilføje egenskaben
top, uden at tilføje position efter horisontalen.
Som et resultat vil vores blok i vertikalen indtage
den angivne værdi, mens den i horisontalen -
forbliver stående der, hvor den stod:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* tilføjer position efter vertikalen */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
