webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> kursy online >> kurs css >> Lekcja 7

Warstwa do warstwy i mamy stronę

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

szukaj: warstwy warstwy z-index z-index kurs css 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

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

Zagadnienia poruszane w tej części kursu:

Chcesz zaoszczędzić czas i pieniądze?
Strony www.
Sprawdź nas!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org