Pozycjonowanie elementów strony za pomocą CSS

Polecamy artykuł Jak stworzyć dobry Layout?

CSS oferuje kilka odmiennych sposobów na rozmieszczenie elementów na stronie.

Sposób Działanie Zastosowanie Wady Bieg dokumentu
position:static + display:block Przenosi element do nowej linii Nie potrzeba niczego specjalnego do rozmieszczania elementów jeden pod drugim Brak Tak
display:table-cell Łączy sąsiednie elementy ze sobą Pozwala bardzo łatwo tworzyć kolumny równej wysokości Elementy tabel mają odmienne zachowanie i ograniczenia względem innych elementów CSS Tak
display: inline Wyświetla obiekt jako element liniowy Dowolne Brak Tak
display:inline-block Zamienia element liniowy w boks w tym samym miejscu Do umieszczania złożonych elementów w tekście lub elementów które mają się przenosić do nowej linii jak tekst Wielkość tekstu i spacje wpływają na elementy Tak
position:absolute + position:relative Umieszcza element w dowolnym miejscu Do precyzyjnego konstruowania elementów strony, które mogą mieć ograniczoną, stałą wysokość Trzeba uważać, żeby nie zasłaniały innych elementów dokumentu Nie

Najbardziej wszechstronny jest display. Można za jego pomocą zrobić kolumny, poziome menu i ilustracje w tekście. Galerie zdjęć z podpisami lub etykiety formularzy najłatwiej robić za pomocą display:inline-block. Do zbudowania nagłówka i umieszczenia menu przydatne jest position:absolute, ale nie zawsze da się za jego pomocą zrobić kolumny i stopkę pod nimi.

Pojedynczy element można wycentrować lub przesunąć do prawej krawędzi za pomocą margin:auto

Sama właściwość position:relative nie nadaje się do budowania układu całej strony.

http://www.stopdesign.com/articles/absolute/ — a niebawem do artykułów dorzucę tłumaczenie tego.

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

| Flow
Zmodyfikowano: 31.08.2011, 09:35
submit