Pozycjonowanie

Termin pozycjonowanie ma wiele znaczeń — m.in. używa się jako ogólne określenie oznaczające tworzenie układu strony za pomocą CSS. Tutaj opisany jest tylko jeden ze sposobów budowania układu — właściwość position.

Elementy statyczne

Domyślnie wszystkie elementy mają pozycję statyczną (position:static), czyli układają się od lewej do prawej, od góry do dołu.

Żeby uzyskać dwa elementy, jeden pod drugim, wystarczy nadać im display:block i nie potrzeba ich łączyć w żaden dodatkowy sposób. Odstęp między nimi reguluje marginpadding.

Poziomo obok siebie elementy statyczne można układać za pomocą display:inline, display:inline-block oraz display:table-cell.

Pozycjonowanie absolutne: position:absolute

Umieszcza obiekt w pozycji wskazanej przez właściwości top, right, bottom, left.

Pozycja tak naprawdę nie jest absolutna, tylko jest względna do elementu zawierającego (ang. containing block), którym domyślnie jest <body>. Każdy element, który ma position inny, niż static staje się elementem zawierającym dla swoich potomków

Obiekt pozycjonowany absolutnie jest wyjęty z biegu dokumentu (przestaje zajmować miejsce w swojej oryginalnej pozycji — niektórzy nazywają to tworzeniem warstwy).

Najczęściej używanie samego position:absolute bez wspomagania się dodatkowym elementem z position:relative nie ma sensu — wyliczenie pozycji elementu będzie trudne i może „rozjechać się”, gdy zmieni się wielkość/pozycja innych elementów na stronie (zob. opis poniżej).

Pozycja

Ustawienie tylko jednej poziomej i pionowej właściwości spośród top, right, bottom, left ustawia odpowiedni róg elementu w wybranym położeniu.

 position:absolute; top:0; right:0;
 Prawy górny róg elementu będzie w prawym górnym rogu elementu zawierającego

 position:absolute; left: 10px; bottom: 5%;
 Lewy dolny róg elementu będzie odsunięty 10 pikseli od lewej i 5% od dołu.

Nie pamiętam, czy wewn. czy zewn.

Położenie będzie względem wewnętrznych krawędzi obramowania elementu zawierającego.

Elementy tak pozycjonowane będą dopasowywać się do wielkości zawartości, jeśli nie nada się im konkretnych wymiarów.

Rozciąganie Bug w IE6

Ustawienie dwóch właściwości poziomych lub pionowych rozciąga element „od-do”.

 position:absolute; left:20px; right:20px; top: 0;
 Rozciągnie element na odległość 20 pikseli od lewej i prawej krawędzi elementu zawierającego. Górna krawędź elementu będzie na samej górze i element nie będzie rozciągany w dół (bo nie określono bottom)

Wielkość będzie liczona względem wewnętrznych krawędzi paddingu elementu zawierającego.

Przycinanie

dodać o clip()

Pozycjonowanie relatywne: position:relative

Ta właściwość nie może być nadana elementom tabel (ale na ich zawartości, tak)

Przesuwa obiekt o ofset ustalony we właściwościach topleft. Obiekt pozostaje w tym samym miejscu w biegu dokumentu. Zmienia się tylko miejsce, w którym jest rysowany.

Przesunięcie rzadko kiedy jest przydatne i pozostawia się domyślne, zerowe, właściwości.

Nie próbuj robić układu strony za pomocą position:relative z niezerowym top/left. Przez to, że obiekt będzie widoczny gdzie indziej, niż zajmuje miejsce, będziesz robić dwa różne układy strony, z czego jeden będzie niewidoczny.

Praktyczne zastosowanie position:relative to łączenie elementów w biegu dokumentu z pozycjonowanymi absolutnie:

Łącznie position:relativeposition:absolute

Wybranemu obiektowi nadaje się position:relative (nazywa się go wtedy kontenerem). Jeśli nie poda się top, ani left, to to nie zmienia jego wyglądu w ogóle, natomiast czyni go elementem zawierającym.

Dzięki temu elementy w nim zawarte, które mają position:absolute będą pozycjonowane względem jego krawędzi, a nie krawędzi <body> czy innego, nadrzędnego elementu zawierającego.

Ponieważ elementy absolutnie pozycjonowane są wyjmowane z biegu dokumentu będą zasłaniały inne elementy, o ile nie zarezerwuje się pod nie odpowiednio dużo miejsca. Miejsce można zapewnić np. ustawiając padding na kontenerze.

 #kontener {position:relative; padding-bottom:100px;}
 #naDoleKontenera {position:absolute; bottom:0; left:0; height:100px;}

Pozycjonowanie względem elementów tabel nie działa. Nie ma możliwości umieszczenia treści na dole komórki tabeli inaczej, niż przez vertical-align lub wykorzystanie stałej wysokości komórek.

Pozycja nieruchoma: position:fixed Bug w IE6

Działa jak position:absolute, z tym wyjątkiem, że zamiast pozycjonować względem elementu zawierającego zawsze pozycjonuje względem okna przeglądarki.

Daje to efekt przyczepienia elementu na stałe na ekranie. Przewijanie strony nie będzie miało wpływu na pozycję elementu i nie będzie możliwości zobaczenia fragmentu elementu, który nie mieści się na ekranie.


Zmodyfikowano: 07.03.2013, 11:02
submit