Warstwa do warstwy i mamy stronę

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-16

szukaj: warstwy z-index kurs css

Opisując pozycjonowanie powiedziałem, że warstwy "szybują". To chyba rzeczywiście dobre określenie. Ale skoro szybują, to powinny mieć - jak prawdziwe samoloty - możliwości latania na rożnych wysokościach. I też takie możliwości mają!

body {
margin: 0;
padding: 0; }

div {
margin: 0;
padding: 0;
border: 1px solid silver;
position: absolute; }

div#w01, div#w02, div#w03 {
top: 5px; }

div#w01 {
left: 128px;
width: 200px;
height: 200px;
background-color: silver;
z-index:1; } // 1

div#w02 { right: 128px;
width: 200px;
height: 200px;
background-color: silver;
z-index: 2; } // 2

div#w03, div#w04 {
left: 338px;
right: 338px;
height: 20px;
background-color: gray;
z-index:3; } // 3

div#w04 {
top: 185px;
z-index:4; } // 4

div#banner {
top: 35px;
left: 138px;
right: 138px;
height: 140px;
z-index:10; } // 5

• 1 - oś z-index jest osią głębi. Na pewno słyszałeś o osi X[szerokość] i Y[wysokość]. Oś z jest trzecim wymiarem. Nie ma jednostki [jak px, pt, %] - po prostu wpisuje się liczbę. Im liczba ta jest większa tym wyżej na stosie jest warstwa [lub inny element]. W tym wypadku przypisałem tej warstwie 1, czyli bardzo małą liczbę [mógłbym także przypisać 100000, jednak jeśli wszystkie warstwy miałyby wyższe wartości, to i tak znajdowałaby się na spodzie]

• 2 - kolejnej warstwie przypisuję 2
• 3 - przy regule dla dwóch warstw wpisuję 3. Obie warstwy są teraz na jednym poziomie - należy jednak unikać takich sytuacji...
• 4 - .. dlatego po raz kolejny dla 'w04' określiłem wartość z-index. Ta warstwa nie będzie na dwóch poziomach - tylko na jednym. Tym, który został przypisany jako ostatni.
• 5 - dla 'banner' zrobiłem spory skok. To całkowicie dozwolone - nawet zalecane, gdyż dzięki temu w przyszłości można dodać kolejne elementy, dla których będzie się już miało gotowe poziomy.

To już wszystko, co chciałem Ci pokazać na tej lekcji:-) Mam nadzieję, że rozumiesz na czym to polega. Jeśli nie - napisz do mnie czego nie rozumiesz, a spróbuję Ci pomóc oraz ewentualnie wprowadzić pewne poprawki do kursu.

Patryk 'yarpo' Jar

szukaj: warstwy z-index kurs css

Zagadnienia poruszane w tej części kursu:

• Pozycjonowanie - wstęp
• Warstwa do warstwy i mamy stronę
• Wypozycjonowana strona
• Czary z tłem