[ A ]
[ B ] [ C ] [ D ] [ E ] [
F ] [ H ] [ L ] [ M ] [ O ] [
P ] [ Q ] [ R ] [ S ] [ T ]
[ V ] [ W ] [ Z ]
z-index
Wartości:
- auto - dopasowanie automatyczne;
- numer - numer warstwy;
- inherit - przejęcie wartości "rodzica".
Zastosowanie.
Przykład 1: definicja dwóch warstw. Warstwy będą wyświetlone w kolejności
ich umiejscowienia w dokumencie
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-2">
<title>Pierwszy dokument</title>
<style type="text/css">
H1 {color:white;}
#warstwa1
{position:absolute;background:red;left:10;top:10;width:150;height:100;}
#warstwa2
{position:absolute;background:blue;left:80;top:80;width:150;height:100;}
</style>
</head>
<body>
<div id="warstwa1">
<h1>Warstwa 1</h1>
</div>
<div id="warstwa2">
<h1>Warstwa 2</h1>
</div>
</body>
</html> |
Efekt:
Przykład 2: definicja właściwości z-index dla dwóch warstw. Warstwy będą
wyświetlone niezależnie od kolejności wystąpienia w dokumencie.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-2">
<title>Pierwszy dokument</title>
<style type="text/css">
H1 {color:white;}
#warstwa1
{position:absolute;background:red;left:10;top:10;width:150;height:100;
z-index:2;}
#warstwa2
{position:absolute;background:blue;left:80;top:80;width:150;height:100;
z-index:1;}
</style>
</head>
<body>
<div id="warstwa1">
<h1>Warstwa 1</h1>
</div>
<div id="warstwa2">
<h1>Warstwa 2</h1>
</div>
</body>
</html> |
Efekt:
[ A ]
[ B ] [ C ] [ D ] [ E ] [
F ] [ H ] [ L ] [ M ] [ O ] [
P ] [ Q ] [ R ] [ S ] [ T ]
[ V ] [ W ] [ Z ]
|