Pozycjonujemy za pomocą kaskadowego arkusza stylów (CSS)

Pozycjonowanie najczęściej kojarzy się wszystkim z optymalizacją stron w taki sposób, aby uzyskać jak najwyższe miejsce w wyszukiwarkach, pod zadanymi frazami. W skrócie – z SEO (Search Engine Optimization). W procesie tworzenia stron internetowych, a dokładniej w trakcie opisywania formy wyświetlania strony poprzez arkusz stylów pojęcie te przyjmuje zgoła inne znaczenie. A mianowicie jest to metoda tworzenia układu strony poprzez użycie właściwości position. Za namową kilku użytkowników Vivee przedstawię dziś na czym właśnie ta metoda polega…

#absolutnieSpozycjonowanyElement {
	position: absolute;
	width: 150px;
	height: 150px;
	left: 150px;
	top: 150px;
}

Spoglądamy kątem oka na statyczne pozycjonowanie…

Najprostszym przykładem zobrazowania tego przykładu będzie utworzenie dwóch szeregowych elementów, a pod nimi jeszcze jednego o szerokości dwóch powyższych.

Na takim edukacyjnym szablonie będziemy opierać się we wszystkich metodach. W tej tradycyjnej, statycznie aby uzyskać powyższy efekt musimy #left i #right wyświetlić liniowo (w tym wypadku display: inline;, ale w innych może to być np. display: table-cell;, itp.), a #bottom blokowo (display: block;).

<div id="left">#left</div>
<div id="right">#right</div>
<div id="bottom">#bottom</div>

Moglibyśmy dwa pierwsze tagi div umieścić w jednym innym, który byłby blokiem. W praktyce się to przydaje, w przedstawianej teorii nie ma jednak takiej potrzeby. Ponieważ jednak #left i #right są fragmentami liniowymi to nadane im szerokości w arkuszu nie będą odpowiadać realnie wyświetlanym rozmiarom. Z tego powodu skorzystamy z właściwości float.

W takim wypadku jednak stworzenie z #bottom obiektu blokowego nie spowoduje przeniesienia go do nowej linii. Musimy wprowadzić elementy z float z powrotem do biegu dokumenty, do czego służy clear.

No i ostatecznie nadając margines szerokości i wysokości 50 pikseli otrzymujemy finalny kod prezentujący układ jak na obrazku:

* { /* usuniecie marginesow i paddingu */
	margin: 0px;
	padding: 0px;
}
html, body {
	color: #DEDBD1;
	font-size: 12px;
	font-family: Verdana, Tahoma, Arial;
	background-color: #F6F7EE;
}
body {
	margin: 50px; /* ustawienie marginesu na 50px */
}
div#left {
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	display: inline; /* liniowy element */
	float: left; /* stworzenie elementu plywajacego z lewej strony */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#right {
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	float: left; /* stworzenie elementu plywajacego z lewej strony */
	display: inline; /* liniowy element */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#bottom {
	width: 398px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	display: block; /* element blokowy */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	clear: left; /* usuniecie oplywania dla float: left;, przejscie do nowej linii */
	background-color: #F6F7EE;
}

I oto rezultat, jaki otrzymamy po złożeniu całego kodu.

Position relative i position absolute!

Ponieważ najczęściej, albo korzysta się z samotnego position: absolute; lub z łączenia position: relative; z position: absolute; to zajmiemy się tymi dwoma przypadkami, tylko i wyłącznie.

Jak już wspomniałem standardowym kontenerem części układu strony z nadanym position: absolute; jest ciało strony (body). Przykładowo:

div#pozycjonowanieAbsolutne {
	position: absolute /* wzgledem body */
	left: 10%; /* 10% szerokosci ciala strony zostanie odsuniety div o tym identyfikatorze */
	top: 500px;
}

Spowoduje to umieszczenie na nowej warstwie (po za biegiem statycznym dokumentu) div w odległości 500 pikseli od górnej krawędzi ciała strony i 10 procent szerokości body od jego lewej krawędzi.

Tego typu model rozmieszczania elementów ma jeden dodatkowy atut. Pozwala na rozciąganie oraz przycinanie pozycjonowanych w taki sposób obiektów.

Pierwszą funkcjonalność otrzymamy operując na dodatkowych właściwościach określających położenie obiektu. Wystarczy podać wartości left i right, aby dokonać rozszerzenia i/lub nadać top i bottom w celu dokonania wydłużenia. Przykładowy kod:

div {
	position: absolute; /* rozmieszczanie absolutne wzgledem relatywnego, nadrzednego rodzica */
	left: 50px; right: 50px; /* rozszerzenie: 50px od lewej krawedzi, az do 50px z prawej krawedzi rodzica */
	bottom: 10%; top: 15%; /* wydłuzenie od gornej odleglosci 10% dlugosci ciala strony, do dolnej krawedzi oddalonej o 15% dlugosci strony */
}

#e {
	position: absolute;
	clip: rect(0px, 10px, 10px, 0px); /* kwadrat o krawedziach 10x10px */
}

Drugą funkcjonalność otrzymamy poprzez użycie clip. Chcąc absolutny fragment skrócić według rozmiarów x, y o połowę patrząc z punktu 0 możemy posłużyć się następującym kodem:

div {
	position: absolute; /* rozmieszczanie absolutne wzgledem relatywnego, nadrzednego rodzica */
	left: 50px;
	bottom: 10%;
	width: 300px; /* szerokosc */
	height: 500px; /* wysokosc */
	/*
		top: 		krawedz gorna przyciecia w miejscu krawedzi gornej div;
		right: 		krawedz prawa przyciecia w polowie szerokosci div;
		bottom:		krawedz dolna przyciecia w polowie wysokosci div;
		left:		krawedz lewa przyciecia w miejscu krawedzi lewej div;
	*/
	clip: rect(0px, 150px, 250px, 0px);
}

Pora przejść do konteneryzacji elementów absolutnie ustawianych w ciele dokumentu. Jak już wspomniałem służy do tego position: relative; które należy ustawić na rodzicu będącym dzieckiem body lub innego obiektu potomnego ciała dokumentu.

<div>
	<div id="left">#left</div>
	<div id="right">#right</div>
</div>
<div id="bottom">#bottom</div>

Będziemy starali się osiągnąć rezultat jak w przykładzie tradycyjnego ułożenia strony. Posłuży nam do tego powyższa struktura, która różni się tylko tym, że pierwsze dwa (w poprzednim paragrafie liniowe) elementy div opatrzyliśmy w jeden kontener (który będzie pozycjonowany relatywnie w tym przypadku).

* { /* usuniecie marginesow i paddingu */
	margin: 0px;
	padding: 0px;
}
html, body {
	color: #DEDBD1;
	font-size: 12px;
	font-family: Verdana, Tahoma, Arial;
	background-color: #F6F7EE;
}
div:first-child { /* :first-child - klasa okreslajaca pierwszy element div u danego rodzica */
	position: relative; /* pozycjonowanie relatywne */
	width: 450px; /* szerokosc potomkow + left */
	height: 200px; /* wysokosc potomkow + top */
}
div#left {
	position: absolute; /* pozycjonowanie absolutne wzgledem relatywnego, nadrzednego rodzica */
	left: 50px; /* odleglosc od lewej krawedzi diva - rodzica */
	top: 50px; /* odleglosc od gornej krawedzi diva - rodzica */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#right {
	position: absolute; /* pozycjonowanie absolutne wzgledem relatywnego, nadrzednego rodzica */
	left: 250px; /* odleglosc od lewej krawedzi diva - rodzica, szerokosc div#left + left div#left */
	top: 50px; /* odleglosc od gornej krawedzi diva - rodzica, wysokosc div#left + top div#left */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#bottom {
	position: absolute; /* pozycjonowanie absolutne wzgledem ciala strony */
	left: 50px;
	top: 200px; /* odleglosc od gornej krawedzi body, wysokosc rodzica div#left */
	width: 398px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}

Porzuciliśmy typy wyświetlania (display) oraz opływanie (float) w tym listingu, które są zbyteczne w tak prostym rozmieszczeniu, a zarazem przy zastosowaniu w.w. metod umieszczania.

Obiektowi nadrzędnemu, poprzez klasę :first-child nadany jest typ i rozmiary. W blokach jemu potomnych nadane są typy absolutne, rozmiary oraz odległości od lewej i górnej krawędzi. W przypadku #right przesunięcie w prawo w postaci left jest sumą odległości przesunięcia #left i szerokości tego diva (wraz z grubością obramowania). Efekt… identyczny :]

Dla #bottom nie ma już kontenera. W tym wypadku chciałem pokazać jak rozmieszczać absolutnie z rodzicem w postaci ciała strony. Tym razem to pozycja od górnej krawędzi body jest równa wysokości relatywnego elementu zawierającego #left i #right.

Co należy pamiętać, że elementy tabel nie mogą być relatywne, a absolutne pozycjonowanie nie działa względem ich treści.

Tworzymy nieruchomą stopkę za pomocą rozmieszczenia ustalonego (fixed)

Za pomocą position: absolute; możemy umieścić stopkę na dole nieprzewijalnej strony stosując atrybuty left / right i bottom. W przypadku tradycyjnej, statycznej metody możemy stopkę umieścić w dolnych częściach każdej odpowiednio układając bloki, jeden nad drugim. Niekiedy jednak może zdarzyć się, że chcielibyśmy takowy „footer” przykleić do dolnej krawędzi okna przeglądarki bez względu, czy treść strony możemy przewijać, czy nie. O tego typu rzeczy pytali właśnie czytelnicy…

Rozmieszczanie ustalone, oznaczane jako position: fixed; działa podobnie jak absolutne, tylko że umiejscawiane obiekty są przyklejane do okna przeglądarki. Bez względu, czy mamy możliwość przewijania treści strony to one zawsze pozostają w stałym miejscu na ekranie. Typ ten jest także podatny na rozciąganie (left i right oraz bottom i top) i przycinanie (clip).

<div id="left">#left</div>
<div id="right">#right</div>
<div id="bottom">#bottom</div>
<div id="footer">#footer</div>
<div id="down">#down</div>

Dodałem dodatkowo elementy o id footer, aby pokazać w jaki sposób można przykleić stopkę, a także down dzięki któremu w przykładzie będzie można przewijać przeglądany dokument.

* { /* usuniecie marginesow i paddingu */
	margin: 0px;
	padding: 0px;
}
html, body {
	color: #DEDBD1;
	font-size: 12px;
	font-family: Verdana, Tahoma, Arial;
	background-color: #F6F7EE;
}
div#left {
	position: fixed; /* pozycjonowanie ustalone względem okna przeglądarki */
	left: 50px; /* odleglosc od lewej krawedzi diva - rodzica */
	top: 50px; /* odleglosc od gornej krawedzi diva - rodzica */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#right {
	position: fixed; /* pozycjonowanie ustalone */
	left: 250px; /* odleglosc od lewej krawedzi diva - rodzica, szerokosc div#left + left div#left */
	top: 50px; /* odleglosc od gornej krawedzi diva - rodzica, wysokosc div#left + top div#left */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#bottom {
	position: fixed; /* pozycjonowanie ustalone */
	left: 50px;
	top: 200px; /* odleglosc od gornej krawedzi body, wysokosc rodzica div#left */
	width: 398px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#footer {
	position: fixed; /* pozycjonowanie ustalone */
	left: 50px; right: 50px; /* rozciagniecie */
	bottom: 0px; /* odleglosc od gornej krawedzi body, wysokosc rodzica div#left */
	height: 50px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	border-bottom: 0px;
	background-color: #F6F7EE;
}
div#down {
	position: absolute;
	left: 50px;
	top: 2500px;
}

Jeżeli przewiniecie stronę w dół, a później w górę zauważycie, że elementy nie zanikają i nie pojawiają się. To cecha tej metody. I praktycznie jedyna różnica względem position: absolute;, bo użycie w arkuszu jest jak widać prawie identyczne.

Ważnym jest także, aby usunąć wszelkie marginesy i paddingi z wbudowanych elementów drzewa dokumentu. Chodzi tutaj o html i body. Jeżeli tego nie zrobimy to w różnych przeglądarkach możemy otrzymać różny wynik przykładów, a w przyszłości tworzonych przez nas stron. Jedne fragmenty mogą zaczynać się w innym miejscu niż inne, pomimo że np. nadaliśmy wszystkim ten sam odstęp od lewej (left) i górnej (top) krawędzi kontenera. W swoich paragrafach robiłem to za pomocą *.

* { /* usuniecie marginesow i paddingu */
	margin: 0px;
	padding: 0px;
}

A gdybyśmy to tak wszystko połączyli…

To w jednym z najprostszych, tworzonych czysto do nauki przykładów otrzymalibyśmy coś takiego. Zapraszam do źródła i miłego czytania :]

——————————
(*) zamiast frazy element w tekście zostały użyte także ogólne synonimy obiekt i fragment.
(**) zamiast frazy pozycjonowanie użyto w tekście także synonimu rozmieszczenie.