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ść.

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.

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.

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.