In this blog I am trying to explain the z-index in CSS3.
Z-Index: The z-index sets the stacking level of an element. An element with greater stack order is always in front of an element with a lower stack order. It works only on positioned elements these positions are following:
1. Position: absolute
2. Position: relative
3. Position: fixed
Z-index has three values these are given below:
1. Auto
It is default the value of z-index and it is sets the stack order equal to its parents.
2. Number
This value is set the stack order of the element. Here is allowed only positive integer value.
3. Inherit
Specify that the z-index should be inherited from the parent element.
Note:
Z-index will work when the position property is set as well.
Html Code:
<html>
<head>
</head>
<body>
<div style="background-color: #CD853F; width: 200px; height: 100px; position: relative; top: 10px; left: 80px; z-index: 2">
<p style="color: #E5E5E5;">
Mindstick India</p>
</div>
<div style="background-color: #E5E5E5; width: 200px; height: 100px; position: relative; top: -60px; left: 35px; z-index: 1;"> <p style="color: #CD853F;"> Mindstick U.S.A</p> </div>
</body>
</html>
Output:
Leave Comment