The z-index property sets the stack order of the boxes.
When you set this property, the relative, absolute, or fixed value must be specified for the position property.
#example {
position: absolute;
top: 10px;
left: 30%;
z-index: 0;
}
| Property | Value | Explanation |
|---|---|---|
| z-index | number or auto | the box with the higher number will appear in front |
The default is "auto".
<html> <head> <title>TAG index</title> <style type="text/css"> div { width: 200px; height: 100px; position: absolute; } #example1 { z-index: 1; background-color: #85b9e9; top: 100px; left: 50px; } #example2 { z-index: 2; background-color: #ffd78c; top: 150px; left: 200px; } #example3 { z-index: 0; background-color: #bde9ba; top: 50px; left: 150px; } </style> </head> <body> <div id="example1">The first box</div> <div id="example2">The second box</div> <div id="example3">The third box</div> </body> </html>