Pozycjonowanie absolutne bez współrzędnych w CSS
W rzeczywistości podawanie współrzędnych przy pozycjonowaniu absolutnym
nie jest obowiązkowe. Jeśli elementowi
po prostu napiszemy position z wartością
absolute, to stanie się on pozycjonowany absolutnie,
ale pozostanie na tym samym miejscu, gdzie
stał. Przy tym wszystkie inne elementy będą
zachowywać się tak, jakby naszego elementu nie było
i mogą na niego nachodzić.
Spójrzmy na przykłady.
Przykład
Na początek zróbmy trzy bloki bez pozycjonowania i między nimi jakiś 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;
}
:
Przykład
A teraz dodajmy zielonemu blokowi absolute.
W wyniku tego blok pozostanie na miejscu,
a wszystkie elementy poniżej będą zachowywać się tak,
jakby naszego elementu nie było i będą na niego nachodzić:
<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;
}
:
Przykład
A teraz dodajmy właściwość left,
nie dodając pozycji po pionie. W wyniku
po poziomie nasz blok ustawi się na podaną
wartość, a po pionie - pozostanie
tam, gdzie stał:
<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; /* dodajemy pozycję po poziomie */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Przykład
Teraz dodajmy, odwrotnie, właściwość
top, nie dodając pozycji po poziomie.
W wyniku po pionie nasz blok ustawi się
na podaną wartość, a po poziomie -
pozostanie tam, gdzie stał:
<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; /* dodajemy pozycję po pionie */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
