Warstwa do warstwy i mamy stronę

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 róznych wysokościach. I też takie możliwości mają!

Zmień w pliku CSS:

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

Opis:
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ć koljene 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 wprowadzic pewne poprawki do kursu.