Absolutt posisjonering uten koordinater i CSS
Egentlig er det ikke obligatorisk å angi koordinater ved absolutt
posisjonering. Hvis et element bare skrives med position med verdien
absolute, vil det bli absolutt posisjonert,
men forbli på samme sted som det
stod. Samtidig vil alle andre elementer
oppføre seg som om vårt element ikke er der
og kan overlappe det.
La oss se på eksempler.
Eksempel
La oss først lage tre blokker uten posisjonering og mellom dem litt tekst:
<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;
}
:
Eksempel
La oss nå legge til absolute til den grønne blokken.
Som et resultat vil denne blokken forbli på plass,
mens alle elementene under vil oppføre seg som om
vårt element ikke er der og vil overlappe 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;
}
:
Eksempel
La oss nå legge til egenskapen left,
uten å legge til vertikal posisjon. Som et resultat
vil blokken vår horisontalt plasseres på den angitte
verdien, mens den vertikalt vil forbli
der den 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; /* legger til horisontal posisjon */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Eksempel
La oss nå, omvendt, legge til egenskapen
top, uten å legge til horisontal posisjon.
Som et resultat vil blokken vår vertikalt
plasseres på den angitte verdien, mens den horisontalt -
forblir der den 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; /* legger til vertikal posisjon */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
