Help - Search - Members - Calendar
Full Version: Z-index problem
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
sajox
Hello everyone. I have a problem with the Z-index. I created three objects using HTML and CSS. I write a Z-index for each of the three of them. The problem is that div3 appears second instead of first and div 2 appears first instead of second. Is the reason their order of listing in the code or something else? As far as I know, the first one from the top is always the one with the highest Z-index. But that is not the case here. What is the problem?Here is the code
<!doctype html>
<head>
<meta charset="UTF-8">
<style type="text/css">



#div1{
width:500px;
height:500px;
background-color:blue;
position:relative;
z-index: 40;


}


#div2{
background-color:yellow;
width:700px;
height:200px;
position:relative;
z-index: -5;

}
#div3{
background-color:red;
width:700px;
height:200px;
position:relative;
z-index: 200;
}

</style>
</head>



<body>

<div id="div2">ff </div>
<div id="div3">ff
</div>
<div id="div1">ff
</div>
</body>
</html>
I will be grateful for any suggestions smile.gif
pandy
I think you misunderstand what z-index does. It sets the stacking order for elements that overlap, that are positioned on top of each other. Your divs don't overlap, that's why nothing happens.


It works like this.

CODE
<!doctype html>
<head>
<meta charset="UTF-8">
<style type="text/css">


#wrapper  { position: relative }

#div1{
width:500px;
height:500px;
background-color:blue;
position: absolute;
z-index: 40;
}


#div2{
background-color:yellow;
width:700px;
height:200px;
position: absolute;
top: 50px; left: 100px;
z-index: -5;
}


#div3{
background-color:red;
width:700px;
height:200px;
position: absolute;
top: 100px; left: 200px;
z-index: 200;
}

</style>
</head>

<body>



<div id="wrapper">
<div id="div2">DIV2</div>
<div id="div3">DIV3</div>
<div id="div1">DIV1</div>
</div>


</body>
</html>
pandy
Also, take a little care using negative z-index. It behaves a little different than one expects. It also goes behind non positioned content. If that page were filled with text (not in the positioned boxes), div2 would go behind that text while the two other divs would cover it. But it wouldn't go behind non positioned backgrounds. It's a little tricky.
sajox
QUOTE(pandy @ Jul 2 2020, 09:27 PM) *

Also, take a little care using negative z-index. It behaves a little different than one expects. It also goes behind non positioned content. If that page were filled with text (not in the positioned boxes), div2 would go behind that text while the two other divs would cover it. But it wouldn't go behind non positioned backgrounds. It's a little tricky.

Thank you very much biggrin.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2024 Invision Power Services, Inc.