Position relative i absolute

post_img

Artykuł ten poświęcony jest pozycjonowaniu elementów HTML na stronie za pomocą css. Porusza też kwestię błędów jakie występują w IE6 i na co trzeba uważać pisząc kod pod tę przeglądarkę.

Na wstępie chciałbym przedstawić i omówić możliwe wartości elementu w css  a mianowicie „position”. Może on przyjąć następujące wartości.

  • static (statyczne)
  • relative (relatywne)
  • absolute (absolutne)
  • fixed (ustalone)

Pozycjonowanie statyczne
Elementy z position:static. Jest to wartość domyślna dla wszystkich elementów. Umieszczenie elementu zależy od pozycji w dokumencie.

Pozycjonowanie relative
Elementy z position:relative. Możemy przesunąć element w dowolnym kierunku od miejsca w którym by się znalazł domyślnie.
Możliwości przesunięcia to top, bottom, left, right. Jeśli przesuniemy element nadając mu top:10px to element przesunie się o 10px w dół. Zajmuje on miejsce tam gdzie powinien być domyślnie wyświetlany a pokazywany jest w innym miejscu. Można nadawać też wartości ujemne.
Tak pozycjonowany element staje się kontenerem dla wszystkich innych, które są absolutnie w nim pozycjonowane.

Pozycjonowanie absolut
Elementy z position:absolute. Możemy przesunąć element w dowolnym kierunku od miejsca położenia w kontenerze. Kontenerem są elementy z position relative, absolute, fixed. Gdy niema takiego elementu nadrzędnego to wybiera go przeglądarka. Może to być body ale nie musi.
Możliwości przesunięcia to top, bottom, left, right. Elementy pozycjonowane w ten sposób nie zajmują miejsca w dokumencie. Możemy więc przenieść element poza widzialny obszar w przeglądarce.

position:relative i position:absolute

position:relative i position:absolute

Pozycjonowanie fixed
Elementy z position:fixed. Możemy przesunąć element w dowolnym kierunku od miejsca położenia kontenera, którym w tym przypadku zawsze jest okno przeglądarki.
Możliwości przesunięcia to top, bottom, left, right. Elementy pozycjonowane w ten sposób nie zajmują miejsca w dokumencie. Możemy więc przenieść element poza widzialny obszar w przeglądarce.
Niestety ten typ pozycjonowanie nie jest obsługiwany w IE6.

z-index
Elementy pozycjonowane mają wagę widoczności elementu na osi-z czyli warstwy. Widoczność określa nam atrybut z-index. Czym wartość liczbowa jest większa tym większy jest priorytet widoczności.

position relative, absolut w IE6 – błędy IE

Zakładamy że „blok” znajduje się zawsze w „kontenerze”

  1. Kontener ma ustaloną wysokość i overflow:auto. Jeżeli wewnątrz znajduje się blok  z position:relative o wysokości dłuższej niż kontener, blok ten wycieknie poza obszar kotenera i będzie widoczny scrollbar. Błąd występuje w IE6.
  2. Jeżeli nadamy elementowi body właściwości margin:0 auto i szerokość w px i umieścimy w nim blok z position:relative, to podczas zmiany wielkości okna w przeglądarce blok będzie zachowywał się jak z position:fixed. Błąd występuje w IE6.
  3. Jeżeli kontener ma właściwość position:relative a blok zawarty wewnątrz position:absolute, to nadając blokowi właściwość bottom powodujemy że IE6 nie umieści go tam gdzie powinien lub blok nie będzie widoczny.
  4. Stosując jednocześnie w bloku właściwości top:0 i bottom:0 lub left:0 i right:0 powodujemy że blok rozciągnie się nam na 100% wielkości kontenera. Niestety żadna wersja IE tnie interpretuje tego w ten sposób.
  5. Jeżeli kontener ma szerokość o wartości nieparzystej i position:relative, to nadając blokowi wewnątrz właściwości position:absolute i width:100%. IE6 zaokrągli nam szerokość do parzystej odejmując 1px. (np. szerokość kontenera ma 101px to IE6 przeliczy to jako 100px dla bloku)
  6. Jeżeli kontener ma position:relative i wielkość o wartości nieparzystej, a blok posiada position:absolute i nadamy mu właściwości right bądź bottom to przeliczając IE6 odejmie 1px źle pozycjonując element.
  7. Jeżeli wypozycjonujemy blok nad tagiem select to w IE6 select zawsze będzie przebijał się na zewnątrz niezależnie od ustawionych wartości z-index.

Struktury kodowania w HTML i css  przedstawione powyżej są często spotykane przy wytwarzaniu layoutu. Warto je znać projektując stronę internetową, która ma być kompatybilna z IE6. I oczywiście modyfikować przedstawione rozwiązania bądź stosować inne.


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

3 komentarzy do “Position relative i absolute

  • Janusz Kaliszzak

    Z z-index nie jest tak prosto 😉
    z-indeks jest okreslany w kontekscie pozycjonowanego rodzica. Wiec jezeli dwa elementy sa ustawiane „na osi” np z-index:2 iz-index: 3 to jezeli w tym ustawionym w pozycji 2 bedzie element ustawiony na z-index:999 to i tak nakryje go rownolegle w stosunku do rodzica umiejscowiony element ustawiony jako z-index:3.

  • john

    Nie do końca relative może być kontenerem dla absolute. Jeśli position:relative odsunie obrazek o odległość X i następnie odsuniemy obrazek o odległość Y ale już przez position:absolute to się obrazek nie ruszy ani o jotę!!
    np:

    /**/