The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Z-index problem
sajox
post Jul 2 2020, 11:48 AM
Post #1





Group: Members
Posts: 9
Joined: 16-June 20
Member No.: 27,402



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 2 2020, 12:12 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,773
Joined: 9-August 06
Member No.: 6



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 2 2020, 02:27 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,773
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sajox
post Jul 4 2020, 12:17 AM
Post #4





Group: Members
Posts: 9
Joined: 16-June 20
Member No.: 27,402



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th July 2021 - 11:09 PM