HTML/CSS/CSS Attributes and Javascript Style Properties/z index
Версия от 09:20, 26 мая 2010; (обсуждение)
"z-index" Example
<div id="myDiv"
style="position:absolute;
left:168px;
top:251px;
width:192px;
height:66px;
z-index:1;
background-color:red;">
an z-index of 1.
</div>
<div style="position:absolute;
left:168px;
top:251px;
z-index:12;
height:50;
background-color:blue;">
a z-index of 12.
</div>
<button onclick="myDiv.style.zIndex = 20;">
Bring red to front
</button>
z-index number
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div#layer1 {
z-index: 3;
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 100px;
background-color: red;
border: 1px solid #000000;
padding: 5px;
}
div#layer2 {
z-index: 2;
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid #000000;
padding: 5px;
}
div#layer3 {
z-index: 1;
position: absolute;
top: 30px;
left: 30px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid #000000;
padding: 5px;
}
</style>
</head>
<body>
<div id="layer1"><h1>Layer One</h1></div>
<div id="layer2"><h1>Layer Two</h1></div>
<div id="layer3"><h1>Layer Three</h1></div>
</body>
</html>