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

data publikacji: 08.01.2009
Pozycjonujemy za pomocą kaskadowego arkusza stylów (CSS)
kategoria: XHTML/CSS autor: m1chu
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...

Elementarz rozmieszczania...

Właściwością CSS określającą położenie elementów w oknie przeglądarki jest position. Może ona przyjąć pięć wartości działających zgodnie w przeglądarkach od wersji Mozilla Firefox 0.1+, Opera 4.0+, Safari 3 oraz IE 7. Wszystkie są zgodne z specyfikacją CSS 2.0+:
- static - wartość domyślna przyjmowana kiedy dla danego obiektu nie zostanie przypisana żadna wartość position. Wartość ta określa standardowe, statyczne rozmieszczenie fragmentów strony - tzn., od góry do dołu i od lewej do prawej. Można je w łatwy sposób umieszczać szeregowo tworząc z nich elementy liniowe (za pomocą display: inline;), a także równolegle, jeden pod drugim tworząc z nich elementy blokowe (display: block;).
- relative - powoduje zastosowanie pozycjonowania relatywnego względem elementu nadrzędnego. Obiekt może zmienić pozycję za pomocą dodatkowych właściwości left i top, nie mniej jednak elementy sąsiadujące zachowywać się będą tak jakby on nadal był na swoim pierwotnym miejscu. W praktyce jednak dodatkowych właściwości się najczęściej nie używa, gdyż rozwarstwiają one stronę tworząc kilka osobnych układów. Najczęściej stosowane w połączeniu z pozycjonowaniem absolutnym (absolute), gdzie element relatywny jest kontenerem (obiektem zawierającym, rodzicem), a absolutny jego zawartością.
- absolute - blok rozmieszczany jest absolutnie względem elementu nadrzędnego, którym domyślnie jest body. Kontenerem nadrzędnym może zostać każdy fragment z nadaną wartością position inną niż static. Wymaga nadania dodatkowych właściwości left i/lub right i/lub top i/lub bottom. Obiekt z taką wartością jest wyrzucany z biegu dokumentu (tworzona jest nowa warstwa).
- fixed - pozycjonowanie względem okna przeglądarki. Wymaga nadania dodatkowych właściwości left i/lub right i/lub top i/lub bottom.
- inherit - przejmuje wartość rodzica.
Dodatkowe, wyżej wspomniane właściwości to:
- left przyjmująca wartość będącą odległością od lewej krawędzi elementu nadrzędnego.
- bottom - wartość jako odległość od dolnej krawędzi elementu nadrzędnego.
- right - odległość od prawej krawędzi kontenera.
- top - odległość od górnej krawędzi kontenera.
Przykład:

#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.
float - tworzy obiekty pływające w celu otoczenia ich przez tekst, bądź tworzenia szeregu kolumn w układzie strony, co wywołane jest własnością przyklejającą obiekty do siebie względem lewej lub prawej krawędzi (CSS2+). Powoduje ona utworzenie nowego biegu dokumentu przez elementy z nadanym float przez co nie mogą się one na siebie nakładać. Posiada następujące wartości:
- left - umieszcza obiekt przyklejając go z lewej strony.
- right - umieszcza element przyklejając go z prawej strony.
- none - wartość domyślna, element nie jest pływający.
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.
clear definiuje położenie nowego akapitu. Rozwijane od CSS1+. Przyjmuje wartości:
- none - domyślna flaga, nie powoduje zmian.
- left - następna linia znajdzie się za elementami położonymi z lewej strony (w poruszanym temacie: float: left;).
- right - kolejna linia znajdzie się za elementami położonymi z prawej strony (float: right;).
- both - nastąpi bezprecedensowe przejście do nowej linii (bez znaczenia na wartość float).
- inherit - przejmuje wartość rodzica.
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 */
}
clip - określa widoczną przestrzeń o kształtach prostokątnych. Zgodne z CSS2+. Parametry:
- auto - domyślny, cały element jest widoczny.
- rect(top, right, bottom, left) - określa krawędzie widoczności obiektu. Wg. specyfikacji wartością jest shape(wartości), ale zarówno w CSS2 i CSS2.1 został zaimplementowany tylko kształt prostokąta (rect).
- inherit - przejmuje wartość rodzica.
Przykład:

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

Zobrazowanie:
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.

copyright © 2008-2009, m1chu

udostępnione na licencji CC dla vivee.info i m1chu.eu
Udostępnij ten artykuł:
Tagi:absolute, clear, css, css2, fixed, float, position, pozycjonowanie, relative, static
Zobacz podobne wpisy:

None Found
3845 Responses2009-01-08+11%3A44%3A06m1chuhttp%3A%2F%2Fvivee.info%2F%3Fp%3D384 to “Pozycjonujemy za pomocą kaskadowego arkusza stylów (CSS)”
1. Gremlin pisze:
  
  8 01 2009 o 16:00
  
  Świetny artykuł. Kod przejrzysty i ładnie skomentowany. Dla początkujących bardzo fajnie wszystko wyjaśnione.
  
  Odpowiedz
2. Mariusz pisze:
  
  10 01 2009 o 15:18
  
  świetny artykuł, dzięki
  
  Odpowiedz
3. niezorientowany pisze:
  
  15 02 2009 o 04:02
  
  Najbardziej interesuje mnie rozmieszczenie ustalone “fixed” które niestety nie działa pod IE6. A już cieszyłem się, że znalazłem rozwiązanie dla mojego problemu. Przeczytałem też “Haki css…” ale z tamtego tekstu wynika tylko, że użytkowników IE można jedynie poinformować, że nie zobaczą dopóki nie zmienią przeglądarki.
  Mimo wszystko dzięki za wyczerpujące teksty.
  
  Odpowiedz
4. m1chu pisze:
  
  15 02 2009 o 04:36
  
  Nie opisałem tego, bo:
  1. trudno poruszyć wszystkie tematy,
  2. IE jest złem, a IE w wersji 6stej i niższych to już w ogóle otchłań nędzy.
  
  Nie mniej jednak jeżeli już pytasz to czysto teoretycznie (nawet nie mam jak sprawdzić) możesz to zrobić poprzez dodanie haka *:
  
  #blok {
  position: fixed;
  left: 100px;
  top: 180px;
  }
  * html #blok {
  position: absolute;
  }
  
  Może zajść także potrzeba użycia komentarzy warunkowych w celu wyodrębnienia tylko dla tej wersji IE kodu ustalającego overflow i wysokość dokumentu:
  
  html, body {
  overflow: auto;
  height: 100%;
  }
  
  Odpowiedz
5. niezorientowany pisze:
  
  16 02 2009 o 01:59
  
  Mój blok zawiera objaśnienia-legendę do dużego planu i uparłem się by ta legenda była zawsze widoczna mimo przewijania dość dużej strony. No i w końcu znalazłem rozwiązanie w postaci fixed.js. Skrypt wykonuje dla tych od IE pozycjonowanie ustalone – trochę migotliwe – ale niech żałują że nie mają prawdziwej przeglądarki.
  Przydały się “Haki css…” bo skrypt wstawiłem w komentarzu dla IE równego lub starszego od 6.
  Chyba wstawię jeszcze specjalny komentarz tylko dla ofiar IE.
  Jeszcze raz dziękuję za oba teksty, a jak skończę to przedstawię efekt.
  
  Odpowiedz
Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Powiadom mnie o nowym komentarzu do tego artykułu.

Top 10

CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
Skrypty client-side
Skrypty server-side
Tutoriale
Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
Wieczór z Open Source
Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.

Najnowsze newsy

Wieczór z Open Source 2010

Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej

Grafart.org i WACOM zapraszają na konkursy!

Witam!

Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej

Zapraszamy na forum graficzne Graffika.pl

Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej

Polecane strony

No bookmarks avaliable.

Artykuły: