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óbDziałanieZastosowanieWadyBieg dokumentu
position:static + display:blockPrzenosi element do nowej liniiNie potrzeba niczego specjalnego do rozmieszczania elementów jeden pod drugimBrakTak
display:table-cellŁączy sąsiednie elementy ze sobąPozwala bardzo łatwo tworzyć kolumny równej wysokościElementy tabel mają odmienne zachowanie i ograniczenia względem innych elementów CSSTak
display: inlineWyświetla obiekt jako element liniowyDowolneBrakTak
display:inline-blockZamienia element liniowy w boks w tym samym miejscuDo umieszczania złożonych elementów w tekście lub elementów które mają się przenosić do nowej linii jak tekstWielkość tekstu i spacje wpływają na elementyTak
position:absolute + position:relativeUmieszcza element w dowolnym miejscuDo precyzyjnego konstruowania elementów strony, które mogą mieć ograniczoną, stałą wysokośćTrzeba uważać, żeby nie zasłaniały innych elementów dokumentuNie

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.

| Flow

Zmodyfikowano: 31.08.2011, 02:35
submit