three layers of div tags

  

<!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: 1;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 200px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #000;
  padding: 5px;
}

div#layer2 {
  z-index: 2;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #000;
  padding: 5px;
}

div#layer3 {
  z-index: 3;
  position: absolute;
  top: 30px;
  left: 30px;
  width: 200px;
  height: 100px;
  background-color: #ffffff;
  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>

Related examples in the same category

1.	'z-index' Example
2.	z-index number
3.	z-index settings
4.	z-index: auto
5.	z-index: child index
6.	Z-index Positioning
7.	The z-index property controls how elements are layered along an invisible z-axis.
8.	You can control the z-index explicitly, however, by providing an integer value to the z-index property.
9.	Nested elements handle the z-index property differently. Descendant elements must always have a z-index higher than that of their parent.
10.	opacity and z-index
11.	z-index among li items
12.	Inline style for z-index
13.	z-index controls the stacking order of positioned elements.
14.	A negative value places element below the normal flow, and a positive value places them above the flow.
15.	Use z-index to change the overlap index
16.	Set z-index to 100
17.	The default value for z-index is auto.
18.	z index, child index
19.	Larger values move them closer to the user in the stacking order.
20.	Stacking with z-index
21.	z-index value
22.	z-index and sibling selector
23.	z-index and child selector

three layers of div tags : z index « CSS « HTML / CSS

Related examples in the same category