HTML/CSS/CSS Attributes and Javascript Style Properties/z index

Материал из Web эксперт
Перейти к: навигация, поиск

"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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/z_index&oldid=4779»