Podstawy pozycjonowania CSS

Transkrypt

1 Podstawy pozycjonowania CSS Żeby pokazać w jaki sposób przeglądarka rozkłada elementy na stronie posłużę się prostym przykładowym fragmentem kodu html. <div id="before">div id="before"</div> <div id="container"> div id="container" <div id="div1">id="div1"</div> <div id="div2">id="div2"</div> <div id="div3">id="div3"</div> </div> <div id="after">div id="after"</div> Position: static Jak widać na poniższym rysunku, domyślnie elementy div rozkładane są jeden pod drugim. Zagnieżdżone elementy umieszczane są kolejno wewnątrz elementów je zawierającyh (Uwaga: na rysunku element "container" ma dodatkowo ustawiony padding, żeby wspomniane zagnieżdżenie było widoczne). Ten typ pozycjonowania jest domyślny i nazywa się static. Modyfikując właściwość position za pomocą CSS możemy wpływać na sposób w jaki przeglądarka wyrenderuje ten sam kod html. Position: relative Pozycjonowanie względne pozwala na przesunięcie elementu o pewną odległość w pionie i poziomie od miejsca, w którym byłby normalnie wylayoutowany. Przesunięcie określamy za pomocą właściwości top, left, bottom i right. W przedstawionym poniżej przykładzie element "div2" został przesunięty o 10 pikseli w prawo i w dół od lewego, górnego rogu. position: relative; top: 10px; left: 10px;

2 Wynik działania powyższego kodu można zobaczyć na obrazku poniżej. Warto zauważyć, że przestrzeń, którą poprzednio zajmował "div2" pozostała na swoim miejscu, a sam element zachodzi teraz na "div3". Position: absolute Kolejny typ pozycjonowania to pozycjonowanie absolutne. Pozwala on na określenie dokładnej pozycji, w której ma zostać umieszczony dany element. Jest on niejako "wyjmowany" z layoutu i renderowany w określonym w CSS miejsciu. position: absolute; top: 0px; left: 0px; Podobnie jak w poprzednim przykładzie, współrzędne położenia elementu określamy za pomocą właściwości top, left, bottom lub right. Zwróćmy uwagę, że tym razem element "div2" został niejako usunięty z dokumentu i umieszczony niezależnie w lewym, górnym rogu. Następujący po nim w kodzie html element "div3" został wyrenderowany bezpośrednio pod "div1". Pozycjonowanie absolutne umożliwia zatem dowolne rozmieszczanie elementów na stronie, niezależnie od kolejności ich umieszczenia w kodzie html. Jest ono jednak uznawane za złą praktykę, gdyż "usztywnia" layout. Absolutnie/relatywnie

3 Jeśli w elemencie otaczającym ustawimy pozycjonowanie relatywne, to wszystkie zawarte w nim elementy pozycjonowane absolutnie zostaną rozmieszczone względem niego. Zobrazuję to poniższym kodem CSS. #container { position: relative; position: absolute; top: 0px; right: 0px; Jak widać na poniższym rysunku "div2" został umieszczony w prawym, górnym rogu elementu "container". Float: left Określając dla elementu właściwość float: left spowodujemy, że zostanie on "uniesiony" i przesunięty możliwie najdalej w lewą stronę. Pozostałe elementy będą go otaczać (opływać z prawej strony). Efekt ten jest najczęściej stosowany do otaczania obrazków tekstem. Może też posłużyć do tworzenia layoutów kolumnowych bez użycia tabel. Właściwość float może przyjmować także wartości right (znaczenia chyba nie trzeba nikomu tłumaczyć) oraz none (wartość domyślna - bez efektu float). #div1 { float:left; width: 300px; Jeśli zastosujemy powyższą definicję stylu CSS, otrzymamy taki oto efekt:

4 Jak widać na powyższym przykładzie, ustawienie dla elementu "div1" własności float: left spowodowało jego przesunięcie do lewej strony elementu "container", w którym się znajduje. Jednocześnie kolejny element "div2" nie układa się już pod spodem, lecz wchodzi w pustą przestrzeń po prawej stronie "div1" i otacza go tekstem. Kolumny bez użycia tabeli Wiedząc jak działa float możemy bez problemu wykorzystać go do zrobienia prostego, dwukolumnowego layoutu. Wystarczy dla dwóch kolejnych divów ustawić szerokość oraz właściwość float: left, jak w kolejnym przykładzie: #div1 { float: left; width: 150px; float: left; width: 150px;

5 Na rysunku widać jednak, że coś jest nie tak. Jak wspomniałem wcześniej element z ustawionym floatem jest "unoszony". To znaczy, że zawierający go element nie uwzględnia go przy wyliczaniu swojej wysokości. Na obrazku widać, że element "container" ma wysokość uwzględniającą jedynie istnienie elementu "div3", który nie ma ustawionej własności float. Element "after" jest częściowo zasłaniany przez "div1" i "div2", a tekst w nim zawarty otacza je z prawej strony. Clear: both By zapobiec takiej sytuacji zastosujemy kolejną własność, stosowaną w parze z float. Jest nią clear, która pozwala na przerwanie oblewania elementu tekstem i rozpoczęcie layoutowania pod nim. Własność ta, podobnie jak float może przyjmować wartości none, left i right oraz both. Do uzyskania pożądanego przez nas efektu najczęściej używa się ostatniej z nich. #div3 { clear: both; Dodanie powyższej definicji do kodu CSS z poprzedniego przykładu, da następujący efekt:

6 Jak widać element "div3" został przeniesiony poniżej "div1" i "div2" przez co teraz także "container" obejmuje te elementy, a div "after" nie wchodzi już pod spód.