Każdy webmaster wykorzystujący kaskadowe arkusze stylów wie, jak łatwo można za ich pomocą manipulować wyglądem i układem strony WWW. Duże możliwości kryją się szczególnie za właściwością position, pozwalającą na duże zmiany w położeniu elementów strony.
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:
div {
position: absolute;
top: 20px;
left: 30px;
}
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:
Kod CSS dla pudełka #one prezentuje się następująco:
#one {
position: absolute;
top: 30px;
left: 30px;
width: 400px;
height: 400px;
background: #8DC2FF;
}
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).
Przypiszmy teraz podobny kod do pudełka #two, znajdującego się wewnątrz #one:
#two {
position: absolute;
top: 10px;
right: 10px;
width: 150px;
height: 150px;
background: #88E68E;
}
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.
Co się jednak stanie, gdy usuniemy trzy pierwsze linijki jego kodu? Pozostawmy następującą regułę CSS:
#one {
width: 400px;
height: 400px;
background: #8DC2FF;
}
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.
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:
img#przesun_w_prawo {
position: relative;
top: -50 px;
}
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:
Nagłówek strony
…
Środkowa część strony
…
…
Kod CSS przyjmuje następującą postać:
* {
margin: 0;
padding: 0;
}
#top {
height: 100px;
background: #7B8F8A;
font-size: 12px;
color: white;
}
#left {
position: absolute;
top: 100px;
left: 0;
width: 200px;
background: #BCC499;
}
#center {
margin-left: 200px;
margin-right: 200px;
background: #F5DD9D;
}
#right {
position: absolute;
top: 100px;
right: 0;
width: 200px;
background: #BCC499;
}
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.
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:
body {
background: #BCC499;
}
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?
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:
Nagłówek strony
…
Środkowa część strony
…
…
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:
* {
margin: 0;
padding: 0;
}
body {
background: #BCC499;
}
#top {
height: 100px;
background: #7B8F8A;
font-size: 12px;
color: white;
}
#left {
position: absolute;
top: 100px;
left: 0;
width: 200px;
background: #BCC499;
}
#srodek {
margin-left: 200px;
background: url(tlo.gif) right repeat-y;
}
#center {
margin-right: 200px;
background: white;
}
#right {
position: absolute;
top: 100px;
right: 0;
width: 200px;
background: #506266;
color: white;
}
.clear {
clear: both;
}
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 200×1 pikseli Symuluje on przedłużenie prawej kolumny:
#srodek {
margin-left: 200px;
background: url(tlo.gif) right repeat-y;
}
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:
.clear {
clear: both;
}
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.
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.
