Pozycjonowanie elementów w CSS

Oprócz position ważną rolę przy tworzeniu układów stron pełnią takie właściwości, jak float, display czy clear. Dzisiaj jednak skupimy się na zastosowaniu tej pierwszej. Pamiętaj jednak, że prawdziwych cudów w CSS będziesz dokonywać dopiero wtedy, gdy poznasz wszystkie metody manipulowania położeniem elementów.

Uzupełnieniem wiedzy teoretycznej i praktycznej przekazanej w tym poradniku są przykłady, które możesz pobrać stąd:

Position: absolute

Dzięki wartości absolute możesz ustalać pozycję elementu - co wydaje się oczywiste - w sposób absolutny. Co to dokładnie oznacza? Otóż położenie elementu możesz ustalić w stosunku do granic okna przeglądarki lub innego elementu nadrzędnego podając odległości w pikselach, emach lub innych rodzajach miar używanych w webmasterskim świecie. Spójrzmy na przykład:

1. div {
2.         position: absolute;
3.         top: 20px;
4.         left: 30px
5. }

Listing zwinięty - 5 linii

Pudełko div znajdzie się w odległości 20 pikseli od górnej granicy okna przeglądarki i 30 pikseli od lewej granicy. Mówiąc krótko - używając absolute, definiujemy pozycję elementu w odniesieniu do granic elementu nadrzędnego. Domyślnie jest do element body oznaczający cały obszar okna przeglądarki. Wykorzystać możemy do tego 4 właściwości:

• top - odległość od górnej granicy,
• right - odległość od prawej granicy,
• bottom - odległość od dolnej granicy,
• left - odległość od lewej granicy.

Zmiana elementu nadrzędnego

Domyślnie każdy element blokowy posiada właściwość position o wartości static. Oznacza one typowe, standardowe wyświetlanie się elementu. Jeżeli wartość właściwości position dla danego elementu ulegnie zmianie, na przykład na absolute, to staje się on elementem nadrzędnym dla kolejnych znajdujących się w nim elementów. Mówią krótko: przejmuje on dotychczasową rolę body. Pozycje znajdujących się w nim elementów będą ustalane względem niego.

Spójrzmy na przykład kodu HTML, który możesz znaleźć w pliku przyklad1.html:

1. <div id="one">
2.         <div id="two"></div>
3. </div>

Listing zwinięty - 3 linii

Kod CSS dla pudełka #one prezentuje się następująco:

1. #one {
2.         position: absolute;
3.         top: 30px;
4.         left: 30px;
5.         width: 400px;
6.         height: 400px;
7.         background: #8DC2FF
8. }

Listing zwinięty - 8 linii

Jak nie trudno się domyślić, utworzy on duży kwadrat o bokach wielkości 400 pikseli i oddalony o 30 pikseli od górnego i lewego boku przeglądarki (ilustracja nr 1).

Ilustracja nr 1. Skutki pozycjonowania absolutnego są proste do przewidzenia

Przypiszmy teraz podobny kod do pudełka #two, znajdującego się wewnątrz #one:

1. #two {
2.         position: absolute;
3.         top: 10px;
4.         right: 10px;
5.         width: 150px;
6.         height: 150px;
7.         background: #88E68E
8. }

Listing zwinięty - 8 linii

Jak widać na ilustracji nr 2, pozycja nowego kwadratu zostaje ustalona względem kwadratu #one. Dzieje się tak ze względu na właściwość position: absolute pierwszego kwadratu.

Ilustracja nr 2. Element o zmienionej wartości position staje się elementem nadrzędnym, przejmując rolę body

Co się jednak stanie, gdy usuniemy trzy pierwsze linijki jego kodu? Pozostawmy następującą regułę CSS:

1. #one {
2.         width: 400px;
3.         height: 400px;
4.         background: #8DC2FF
5. }

Listing zwinięty - 5 linii

Efekt zmiany w kodzie CSS możesz zaobserwować na ilustracji nr 3. Teraz pozycja bloku #dwa ustalana jest względem okna przeglądarki. Dzięki temu przykładowi możemy lepiej zrozumieć, w jaki sposób zmiana właściwości position wpływa na przejęcie roli elementu nadrzędnego.

Ilustracja nr 3. Zmieniając kod pudełka #one, zmieniamy także zachowanie pudełka #two

Position: relative

Pozycjonowanie przy użyciu position: relative działa podobnie do absolutnego. Z jedną istotną różnicą: położenie elementu ustalane jest nie względem granic elementu nadrzędnego, ale względem naturalnego położenia pozycjonowanego elementu. Spójrz na przykład kodu:

1. img#przesun_w_prawo {
2.         position: relative;
3.         top: -50 px
4. }

Listing zwinięty - 4 linii

Obrazek oznaczony identyfikatorem #przesun_w_prawo zostanie przesunięty o 50 pikseli do góry w stosunku do miejsca, w którym naturalnie wystąpiłby na stronie

Przy tym element z position: relative (tak samo jak zawierający position: absolute) przejmuje dla elementów podrzędnych rolę body. Na ogół wartość relative jest rzadziej używana i nie uchodzi za tak samo przydatną, jak absolute.

Bardzo prosty układ kolumnowy

Wykorzystajmy position: absolute do stworzenia układu kolumnowego, spełniającego następujące wymagania. Po pierwsze ma być rozciągnięty na 100% szerokości okna przeglądarki. Po drugie ma zawierać 3 kolumny, z czego dwie to boczne kolumny o stałej szerokości, a trzecia to płynna część środkowa. Gotowy efekty znajdziesz w pliku przyklad2.html.

Pierwszym krokiem jest utworzenie struktury HTML:

 1. <div id="top">
 2.         <h1>Nagłówek strony</h1>
 3. </div>
 4. <div id="left">
 5.         <p>...</p>
 6. </div>
 7. <div id="center">
 8.         <h2>Środkowa część strony</h2>
 9.         <p>...</p>
10. </div>
11. <div id="right">
12.         <p>...</p>
13. </div>

Listing zwinięty - 13 linii

Kod CSS przyjmuje następującą postać:

 1. * {
 2.         margin: 0;
 3.         padding: 0;
 4. }
 5.  
 6. #top {
 7.         height: 100px;
 8.         background: #7B8F8A;
 9.         font-size: 12px;
10.         color: white
11. }
12.  
13. #left {
14.         position: absolute;
15.         top: 100px;
16.         left: 0;
17.         width: 200px;
18.         background: #BCC499
19. }
20.  
21. #center {
22.         margin-left: 200px;
23.         margin-right: 200px;
24.         background: #F5DD9D
25. }
26.  
27. #right {
28.         position: absolute;
29.         top: 100px;
30.         right: 0;
31.         width: 200px;
32.         background: #BCC499
33. }

Listing zwinięty - 33 linii

Efekt działania połączonego kodu widać na ilustracji nr 4. Pierwsza reguła nadaje wartość 0 wszystkim marginesom i paddingom. Jest to ważne ze względu na różnice w ich interpretacji przez różne przeglądarki. Druga reguła definiuje nagłówek strony o wysokości 100 pikseli. Będzie on zawsze rozciągać się na całą szerokość strony. Przy okazji warto wspomnieć, że ciekawy schemat kolorystyczny został zaczerpnięty z genialnego serwisu http://www.colourlovers.com.

Ilustracja nr 4. Pozycjonowanie absolutne pozwala na szybkie tworzenie układów kolumnowych

Reguły odpowiadające za lewą i prawą kolumnę są pozycjonowane absolutnie do lewego i prawego brzegu okna przeglądarki, a także oddalone o 100 pikseli od brzegu górnego, co jest konieczne ze względu na pudełko #top. Część środkowa posiada z obu stron marginesy szerokości bocznych kolumn. To całkiem jasny i łatwy do zrozumienia przykład.

Z przykładem wiąże się jednak istotny problem. Boczne kolumny są krótsze od części środkowej (tak będzie w większości sytuacji), a dla dobrego efektu i spójności wizualnej wszystkie trzy kolumny powinny być rozciągnięte na taką samą wysokość. Aby osiągnąć tego rodzaju efekt, możemy nadać odpowiedni kolor tła elementowi body:

1. body {
2.         background: #BCC499
3. }

Listing zwinięty - 3 linii

Z efektem jego działania możesz zapoznać się na ilustracji nr 5. Rozwiązuje to nasze problemy, jeżeli celem jest jedynie stworzenie prostego układu, w którym obie boczne kolumny posiadają identyczny kolor tła. Co jednak należy zrobić w sytuacji, gdy kolumny mają posiadać różne kolory tła?

Ilustracja nr 5. Zmieniając kolor tła body symulujemy wydłużenie kolumn. Metoda ta posiada jednak poważne ograniczenia

Bardziej skomplikowany układ kolumnowy

Efektem naszych następnych działań będzie układ, który znajdziesz w pliku przyklad3.html. Gotowy układ przedstawia także ilustracja nr 6. W tym przypadku celem jest stworzenie układu, w którym każda z kolumn posiada odmienny kolor tła.

Przede wszystkim musimy zmodyfikować strukturę HTML:

 1. <div id="top">
 2.         <h1>Nagłówek strony</h1>
 3. </div>
 4. <div id="left">
 5.         <p>...</p>
 6. </div>
 7. <div id="srodek">
 8.         <div id="center">
 9.                 <h2>Środkowa część strony</h2>
10.                 <p>...</p>
11.         </div>
12.         <div id="right">
13.                 <p>...</p>
14.         </div>
15. </div>
16. <div class="clear"></div>

Listing zwinięty - 16 linii

Czy dostrzegasz już istotne zmiany? W kodzie pojawił się element oznaczony, jako #srodek, który zawiera środkową oraz prawą kolumnę. Pod nim pojawił się element z klasą clear odpowiadający za przedłużenie środkowej kolumny do końca ekranu. Style CSS wyjaśniają więcej:

 1. * {
 2.         margin: 0;
 3.         padding: 0;
 4. }
 5.  
 6. body {
 7.         background: #BCC499
 8. }
 9.  
10. #top {
11.         height: 100px;
12.         background: #7B8F8A;
13.         font-size: 12px;
14.         color: white
15. }
16.  
17. #left {
18.         position: absolute;
19.         top: 100px;
20.         left: 0;
21.         width: 200px;
22.         background: #BCC499
23. }
24.  
25. #srodek {
26.         margin-left: 200px;
27.         background: url(tlo.gif) right repeat-y
28. }       
29.  
30. #center {
31.         margin-right: 200px;
32.         background: white
33. }
34.  
35. #right {
36.         position: absolute;
37.         top: 100px;
38.         right: 0;
39.         width: 200px;
40.         background: #506266;
41.         color: white
42. }
43.  
44. .clear {
45.         clear: both
46. }

Listing zwinięty - 46 linii

Przeanalizujmy powyższy kod. Element body posiada takie samo tło, jak lewa kolumna, czyli #BCC499. Sam kod lewej kolumny niczym się nie różni od przedstawionego przy wcześniejszym przykładzie.

Następnie dostrzec możesz regułę dla diva #srodek. Posiada margines tworzący miejsce dla lewej kolumny. Jako tła użyty został plik tlo.gif powtarzany w pionie. Jego rozmiar to 200x1 pikseli Symuluje on przedłużenie prawej kolumny:

1. #srodek {
2.         margin-left: 200px;
3.         background: url(tlo.gif) right repeat-y
4. }

Listing zwinięty - 4 linii

Użycie pliku graficznego jest najistotniejszą zmianą. Następnie div #center posiada tylko jeden margines z prawej strony, a #right nadaliśmy kolor tła identyczny z powtarzanym plikiem graficznym. Całości dopełnia reguła:

1. .clear {
2.         clear: both
3. }

Listing zwinięty - 3 linii

Jeżeli zastosowanie właściwości clear odpowiadającej za sposób łamania linii pod zawierającym ją elementem nie jest ci znany, to musisz wiedzieć, że powyższy kod sprawia, że div #srodek zostaje automatycznie wydłużony do końca wysokości okna przeglądarki.

Ilustracja nr 6. Wykorzystanie sztuczki z plikiem graficznym użytym jako tło pozwala nadać bocznym kolumnom odmienne kolory

Po zdobyciu teoretycznej wiedzy o właściwości position i przeanalizowaniu powyższych przykładów na pewno dostrzegasz, że pozycjonowanie absolutne posiada duży potencjał, który w wielu przypadkach warto wykorzystywać.

Zauważ, że pozycjonowanie absolutne kolumn działa idealnie wtedy, gdy środkowa kolumna jest dłuższa od bocznych. Taka sytuacja ma miejsce w przypadku dużej liczby serwisów, jednak nie zawsze. Musisz za każdym razem przeanalizować, czy wybrana metoda tworzenia układu kolumnowego jest adekwatna do charakteru strony.