Samouczek CSS - Wyświetlanie i pozycjonowanie elementów  

Autor: Bożena Jurczyk

Opublikowano: 2011-06-07

Zazwyczaj elementy HTML traktowane są przez przeglądarki jako elementy blokowe. CSS wyróżnia dwa typy bloków – elementy blokowe i elementy śródliniowe. Mimo że większość arkuszy stylów traktuje je tak samo, to istnieją znaczące różnice w sposobie wyświetlania tych elementów. Na szczęście istnieje pewna właściwość, która likwiduje te różnice. Możemy zatem sprawić, aby dla naszych potrzeb element blokowy zachowywał się jak śródliniowy i odwrotnie.

Z kolei za pomocą właściwości pozycjonujących mamy pewnego rodzaju kontrolę nad położeniem elementów na naszej stronie. Należy jednak pamiętać, że dobieranie stałych wartości niesie ze sobą pewne ryzyko – zmiana choćby rozmiaru czcionki przeglądarki przez odwiedzających może całkowicie zburzyć  układ witryny.

Po zapoznaniu się z tym artykułem będziesz:

• Wiedział, jak zachowują się elementy blokowe, a jak śródliniowe,
• mógł wedle życzenia nadawać cechy blokowości każdemu elementowi,
• potrafił umieścić element na stronie dokładnie w tym miejscu, w którym zechcesz,
• znał zasady wyświetlania elementów nakładających się na siebie.

Implementacja

Właściwość, która decyduje, w jaki sposób wyświetlany będzie dany element, to display. Może ona przyjąć trzy wartości:

• inline – sprawia, że dany element zachowuje się jak element śródliniowy,
• block – mówiąca elementowi, że jest elementem blokowym,
• none – jej zadaniem jest po prostu ukrycie danego elementu na stronie.* *

Elementy blokowe wiążą się z dodatkowym odstępem za i przed elementem. Do tej grupy należą takie znaczniki, jak: <p>, <div>, <table>.

Z kolei elementy liniowe nie dodają żadnego odstępu i nie można też dodać do nich górnych oraz dolnych marginesów ani dopełnień – nie daje to więc oczekiwanego przez nas rezultatu. Wyjątkiem jest tu znacznik <img/>. Do grupy elementów liniowych należą też np. <strong>, <a>.

Rys.1. Przykład strony z elementami blokowymi i liniowymi.

W kolejnym przykładzie zastosowano następujący styl do tych samych elementów liniowych:

a, strong
{
    margin: 10px;
    padding: 10px;    
}

Rys. 2. Przykład strony z zastosowaniem górnych i dolnych marginesów oraz dopełnień dla elementów liniowych.

Jak widać, górny i dolny margines w tym przypadku nie działa.

Pozycjonowanie elementów na stronie

W CSS mamy dostęp do czterech typów pozycjonowania:

• bezwzględne (absolute),
• względne (relative),
• stałe (fixed),
• statyczne (static).

Pozycjonowanie bezwzględne

selektor {  position: absolute;  pozostałe parametry}

Umożliwia ono określenie elementu na stronie poprzez podanie wartości odległości od poszczególnych krawędzi zawierającego kontenera. Jednostką do wykorzystania są piksele, em oraz procenty. Możemy określić pozycję left, right, top i bottom (czyli odpowiednio odległość od lewej, prawej, górnej i dolnej krawędzi).

Należy pamiętać, że elementy pozycjonowane bezwzględnie są zupełnie niewidoczne dla pozostałych elementów w kodzie HTML, co oznacza, że nie mają wpływu na ich układ. Dlatego też należy uważać, aby nie przykryły innych elementów posiadających ważną treść.

Informacja

Nie należy stosować właściwości position: absolute do elementów pływających. Właściwości float oraz absolute nie mogą oddziaływać jednocześnie na ten sam element.

W przykładzie poniżej zastosowano następujące wartości dla akapitu:

position: absolute, left:100px, top:-10px, width: 150px oraz padding: 10px.

Rys. 3. Przykład strony z akapitem wypozycjonowanym bezwzględnie.

* *

Pozycjonowanie względne

selektor {  position: relative; pozostałe parametry  }

Element pozycjonowany względnie jest przesuwany o wartości określone jako left, right, top oraz bottom względem swojego początkowego położenia na stronie. W przeciwieństwie do pozycjonowania bezwzględnego pozostałe elementy wiedzą o jego istnieniu i dostosowują się do jego pierwotnej pozycji. Przesunięty element pozostawia zatem po sobie puste miejsce, w którym znajdowałby się normalnie.

Informacja

Pozycjonowanie względne stosuje się zazwyczaj nie do przenoszenia elementów na stronie, ale raczej wyznaczania nowego punktu odniesienia dla elementów, które się w nim znajdują.

W przykładzie poniżej zastosowano następujące wartości dla akapitu:

position: relative, left:100px, top:-10px, width: 200px oraz padding: 10px.

Rys. 4. Przykład strony z akapitem wypozycjonowanym względnie.

Pozycjonowanie stałe

selektor {   position: fixed;   pozostałe parametry  }

Element tak pozycjonowany jest zablokowany w określonym miejscu na ekranie. Dlatego też wartości pozostałych parametrów zawsze określane są względem krawędzi okna. Elementy takie są stale widoczne i nie przewijają się z pozostałą zawartością strony. Nie mają też wpływu na pozostałe elementy i są wyświetlane nad nimi.

Niestety, Internet Explorer 6 i wersje wcześniejsze nie potrafią zinterpretować tego ustawienia.

W przykładzie poniżej zastosowano następujące wartości dla akapitu:

position: fixed, left:100px, top:-10px, width: 200px oraz padding: 10px.

Rys. 5. Przykład strony z akapitem wypozycjonowanym na stałe.

Pozycjonowanie statyczne

selektor {  position: static;  }

Element tak pozycjonowany to nic innego, jak element z normalnego biegu kodu HTML. Jest to domyślna metoda pozycjonowania.

Przy określaniu parametrów left, right, top oraz bottom możemy (ale nie musimy) ustawić wszystkie cztery właściwości. Ustawienie zarówno lewej, jak i prawej pozycji oznaczać będzie, że przeglądarka sama określi szerokość elementu, która zależna będzie wtedy od szerokości okna przeglądarki. Wyjątkiem jest przeglądarka Internet Explorer 6 i wcześniejsze, które to wyświetlają poprawnie lewą pozycję, zaś prawą pomijają. To samo dotyczy wysokości pozycjonowanych elementów.

Informacja

Element pozycjonowany jest w rzeczywistości pozycjonowany względem okna tylko wtedy, gdy nie znajduje się w innym elemencie pozycjonowanym bezwzględnie, względnie lub na stałe. W przeciwnym wypadku jest on pozycjonowany właśnie względem znacznika, w którym jest zagnieżdżony.

Często przy pozycjonowaniu nieuniknione jest nakładanie na siebie różnych elementów. Aby mieć pewność, który element pozostanie na wierzchu, możemy użyć właściwości z-index. Im wyższa jej wartość, tym  wyższy priorytet danego elementu. Dopuszczalne są zarówno wartości dodatnie, jak i ujemne. W ten sposób, niezależnie od kolejności wystąpienia w kodzie HTML, możemy kontrolować nakładanie na siebie wyświetlanych elementów.

Do kolejnego przykładu zastosowane zostały style:

div{    position:absolute;  width:100px;  height:100px; }
#div1{  background:red;  z-index:2;}
#div2{  top:30px;  left:10px;  background:blue;  z-index:1;}

Zaś HTML to jedynie dwa znaczniki div:
<div id="div1"></div>
<div id="div2"></div>

Ponieważ div1 posiada najwyższy z-index, dlatego znaduje się nad elementem div2.

Rys. 6. Przykład strony, na której użyto właściwości z-index.

Podsumowanie

W tym artykule zapoznaliśmy się ze sposobami wyświetlania elementów na stronie oraz ich pozycjonowania. Jak widać na prostych przykładach, w których zastosowaliśmy te właściwości, odpowiednio wykorzystane mogą stać się dobrym sposobem na utworzenie ciekawego układu na naszej witrynie internetowej.

W kolejnym artykule będziemy się uczyć wykorzystywać marginesy i dopełnienia, aby mieć jeszcze pełniejszą kontrolę nad wykorzystanymi przez nas elementami.

---