|
Warstwa do warstwy i mamy stronę |
| Drukuj |
|
Email
|
|
Napisał Patryk Jar (1825 odsłon)
|
|
11.01.2006 14:51 |
|
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.
|
