Hello 2blogger readers, you must have good knowledge of z-index in CSS when positioning elements. Below i am going to explain you in detail what z-index is in css.
# What is z-index in css?
=> The z-index property specifies the stack order of an element. In other words, when there is an overlap between two elements, the z-index value determines which one shows up on top. The element with a larger z-index value will appear on top and lower will goes behind of it.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)
For example
I define two boxes with the following css code to help you better understand. You can copy the code and use it yourselves so that you can easily understand the difference. I have defined two classes in css box1 and box2. If you change the z-index value and preview it in the browser you will understand better what is the role of z-index in css.
<head>
<style type="text/css">
I hope you understand the z-index in css clearly.Iif you have any confusion then please comment below. I will try to answer your question..box1 {
z-index: 1;
position:absolute;
width:150px;
height:150px;
top:20px;
left:20px;
border: 5px solid #FF0000;
background-color: #FF9900;
}.box2 {</style>
z-index: 2;
position: absolute;
width:150px;
height:150px;
top:100px;
left:100px;
border: 5px solid #FF0000;
background-color: #3399CC
}
</head>
<body>
<div class="box1">box 1 </div>
<div class="box2">box 2 </div>
</body>
</html>
Have a good time!
No comments:
Post a Comment