relative-absolute trick: pozycjonowanie absolutne

Czasami zachodzi konieczność pozycjonowania absolutnego jednego elementu względem drugiego. Często to nie działa - element jest pozycjonowany względem okna przeglądarki. Dlaczego tak się dzieje znajduje się na stronie w3c opisującej szczegóły wizualnego renderowania dokumentów. Natomiast sa styl position został opisany tutaj.

Klucz do zrozumienia pozycjonowania

Czasami może wydawać się, że position: absolute działa względem okna przeglądarki. Nie jest to prawdą. Działa ono względem bloku nadrzędnego(ang. containing block). Jeśli nie ma żadnego bloku nadrzędnego to element jest opzycjonowany względem okna przeglądarki. Jeszcze raz podam link opisujący szczegóły wizualnego renderowania dokumentów.

Blokiem nadrzędnym może być dowolny element z position ustawionym na absolute, relative lub fixed.

Działanie relative

position:relative jest tym czego potrzebujemy. Jeśli ustawimy elementowi właśnie takie pozycjonowanie to zostanie on umieszcony na stronie w sposób jakby nie był mu przypisany żaden styl, a następnie zostanie przesunięty względem tej początkowej pozycji zgodnie z warością stylu top, right, bottom lub left.

Jeśli przesunięcie nie zostanie ustawione to element zostanie na swojej oryginalnej pozycji ale zyska ważną cechę: stanie się blokiem nadrzędnym.

Pozycjonujemy absolutnie

Jeśli mamy już blok nadrzędny, wystarczy zagnieździć w nim element, który chcemy pozycjonować absolutnie i odpowiednio go przesunąć. Proste. Ważne jest to, że jeśli element pozycjonowany absolutnie będie jedynym obiektem potomnym bloku nadrzędnego to sam blok nadrzędny będzie miał zerową wysokość - czyli nie wpłynie na layout strony. Warto też o tym pamiętać jeśli chce sie nadać tło elementowi stanowiącemu blok nadrzędny. Taki trik się po prostu nie uda.