For a cleaner design for our web page and for good functionality, using the CSS positioning property is a plus. This property allows the elements used to overlap with others, creating a spectacular effect. In fact, the last element in our HTML code we place the position above, through the action called stratification. When we decide to use CSS positioning to position the elements contained on our web page, we have to consider three dimensions: two standard dimensions, namely left and right (also known as index x) and up and down (index y). Thus, we will position the elements, vertically or horizontally, through these indices.
In web design, there is the possibility of stacking or stratification (above and below) of the elements on the page. Index x and index y of the vertical and horizontal, and z-index is the depth of our web page, essentially the third dimension.
CSS z-index is one of the most important elements, and through it, HTML elements can be overlapped with different depths. In practice, z-index refers to the layout of a web page (if you lay one layer over another, then the layer the bottom layer will be hidden from the top layer.) In other words, it determines the stack layer of the HTML element, only functioning when we define the position of that element, namely the fixed, relative or absolute position. The Z-index can be a positive number (e.g. 50) or a negative number (for example – 50), and the default z index is 0. If the two constituent elements have the same z-index value, the browser it will index it in the order in which it appears in HTML.
The z-index element is supported by most major browsers. The value of the z-index element is positive and the positive the value increases, the element will either hide or overlap with the other HTML elements. Z-index in the CSS style sheet looks like this:
.zvalue {
z-index : 1;
position : absolute;
}Zvalue is an id of an HTML element. In the following lines I will show you an example where I insert a static text the html tag on an image.
<!DOCTYPE html>
<html>
<head>
<title>
css z index
</title>
</head>
<body>
<div id="image" style=" z-index: 1; position: relative;">
<img src=" http://www.holtz.org/Library/Images/Slideshows/Gallery/Landscapes/11%20(11).jpg" alt="z-index" >
</div>
<div id="label" style="margin: -833px 0px 0px 50px; z-index: 1; font-size: 200px; position: fixed;">
z - index
</div>
</body>
</html>How to use Z-index
Assign to each item in the stack a certain value of the z index. For example, in our case we have four different elements, namely: element 1 — z-index of -15, element 2 — z-index of 58, element 3 — z-index not set, element 4 — z-index of -25, they will stack in the following order: element 2, element 3, element 1 and element 4. We can get different values of the z index to stack the elements so that if we add other elements to our web page, we do not need to adjust the values of the other elements. So, it is indicated to take values 100 for the element top, 0 is the value for the base or intermediate element, and -100 for the bottom element.
Careful! For our element to use the z-index property, it is necessary for the element to use an inline-block or block display in our CSS file.
Remember, when our z-index property is not specified on any constituent element, then the elements will be stacked in the following order: the edges of the root element and the background, the unwanted descending blocks, depending on the order of occurrence in the HTML code, descending the positioned elements, at in the order of appearance in the HTML code. In the following lines, I will come up with an eloquent example. So:
<!DOCTYPE html>
<html>
<head>
<title>
css z index
</title>
</head>
<body>
<style>
b {
font-family: Helvetica;
}
div {
padding:20px;
border: 3px dotted;
text-align: center;
}
.static {
position: static;
height: 170px;
border-color: #996;
width: 450px;
}
.absolute {
position: absolute;
width: 150px;
height: 350px;
background-color: #fdd;
border-color: #900;
opacity: 0.5;
}
.relative {
position: relative;
height: 80px;
background-color: #cfc;
border-color: #696;
opacity: 0.7;
width: 450px;
}
#box1 {
top: 20px;
left: 10px;
background-color: darkgrey;
width: 100px;
}
#box3 {
top: 30px;
margin: 0px 50px 0px 50px;
background-color: DarkOrange;
}
#box2 {
top: 20px;
right: 450px;
background-color: darkgrey;
width: 100px;
}
#box4 {
background-color: DarkOrchid ;
margin: 0px 50px 0px 50px;
}See also:
</style>
<div id="box1" class="absolute">
<b>BOX 1</b><br /> ABSOLUTE</div>
<div id="box3" class="relative">
<b>BOX 3</b><br />RELATIVE</div>
<div id="box2" class="absolute">
<b>BOX 2</b><br />ABSOLUTE</div>
<div id="box4" class="static">
<b>BOX 4</b><br /> STATIC</div>
</body>
</html>The property is mentioned by the word auto (it does not establish a new stacking context, the level of stacking generated by the current context is the same as that of the parent) or <integer>( consists of the stack level generated in the current stacking context. Set a local stacking context and the level is 0).
Example here :
<!DOCTYPE html>
<html>
<head>
<style>
.dashed-box {
position: relative;
z-index: 1;
border: dotted;
height: 5em;
margin-bottom: 1em;
margin-top: 3.5em;
width: 50%;
}
.LIGHTGREY-box {
position: absolute;
z-index: 3;
background: LIGHTGREY;
width: 80%;
left: 60px;
top: 3em;
}
.MEDIUMPURPLE-box {
position: absolute;
z-index: 2;
background: MEDIUMPURPLE;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
</style>
</head>
<body>
<div class="dashed-box">DOTTED BOX
<span class="LIGHTGREY-box">LIGHTGREY BOX</span>
<span class="MEDIUMPURPLE-box">MEDIUMPURPLE BOX</span>
</div>
</body>
</html>Conclusion
CSS stacking contexts is an interesting topic, and this article did not attempt to discuss it in detail, but has attempted to provide insight into how the contexts of a particular web page can become a strong CSS property if it is fully understood.
The z-index property values are an axis location inside and outside the monitor. There are stacking circumstances, rules to determine top and bottom display and stacking levels. Advanced developers should have a better understanding of how the proper use of the z-index can provide solutions to appearance issues and CSS design issues.
