Hello
friends you must have good knowledge of z-index in CSS when positioning
elements. below i am telling you in detail what is z-index in css.
what is z-index in css?
For example
i define two box with the following css code to help you better understand. you can copy the code and paste it to the dreamweaver and and you will understand the difference. I have defined two class in css box1 and box2. if you change the z-index value in dreamweaver and preview it in the browser you will understand better what is the role of z-index in css.
<html>
<head>
<style type="text/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.
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)
For example
i define two box with the following css code to help you better understand. you can copy the code and paste it to the dreamweaver and and you will understand the difference. I have defined two class in css box1 and box2. if you change the z-index value in dreamweaver 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. if you have any confussion then please comment below. i will try to answer you 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>
0 comments :
Post a Comment