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

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

"z-index" Example

   <source lang="html4strict">
   

an z-index of 1.

a z-index of 12.

<button onclick="myDiv.style.zIndex = 20;"> Bring red to front </button>


     </source>
   
  


z-index number

   <source lang="html4strict">

<!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>

Layer One

Layer Two

Layer Three

</body> </html>

</source>