CSS Layers
Float, Position and LayersIn this lesson, we will learn how to manage the stacking order of HTML elements using CSS layers.
What are CSS Layers?
CSS layers refer to the order in which elements are visually stacked on top of each other on a web page. Elements with higher stacking values appear on top of elements with lower stacking values. The z-index property is used to control this stacking order.
CSS z-index Property
The CSS z-index property allows you to specify the stacking order of elements by assigning a numerical value to it. Elements with higher z-index values are placed on top of elements with lower values. Here's how it works:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS z-index Example</title>
<!-- Internal CSS -->
<style>
#d1 {
width: 150px;
height: 150px;
background-color: red;
position: absolute; /* or fixed, relative */
top: 20px;
left: 20px;
z-index: 1; /* an integer value */
}
#d2 {
width: 150px;
height: 150px;
background-color: yellow;
position: absolute;
top: 40px;
left: 40px;
z-index: 2;
}
#d3 {
width: 150px;
height: 150px;
background-color: green;
position: absolute;
top: 60px;
left: 60px;
z-index: 3;
}
</style>
</head>
<body>
<div id="d1">1st div</div>
<div id="d2">2nd div</div>
<div id="d3">3rd div</div>
</body>
</html>In the above example, d3 will appear on top of d2 and d1 because it has a higher z-index value. The stacking order is determined by the z-index values. You can change the z-index value of the div to change their order as per your choice. For example:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS z-index Example</title>
<!-- Internal CSS -->
<style>
#d1 {
width: 150px;
height: 150px;
background-color: red;
position: absolute; /* or fixed, relative */
top: 20px;
left: 20px;
z-index: 3; /* an integer value */
}
#d2 {
width: 150px;
height: 150px;
background-color: yellow;
position: absolute;
top: 40px;
left: 40px;
z-index: 2;
}
#d3 {
width: 150px;
height: 150px;
background-color: green;
position: absolute;
top: 60px;
left: 60px;
z-index: 1;
}
</style>
</head>
<body>
<div id="d1">1st div</div>
<div id="d2">2nd div</div>
<div id="d3">3rd div</div>
</body>
</html>Let's see another example.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS z-index Example</title>
<!-- Internal CSS -->
<style>
div {
width: 150px;
height: 150px;
background-color: red;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
z-index: -1;
}
</style>
</head>
<body>
<div></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<br>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<br>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<br>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<br>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>In the above example, we set the z-index of red color div to -1 to send it behind the paragraphs.
