Z-index problem |
Z-index problem |
sajox |
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 |
pandy |
Jul 2 2020, 12:12 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 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> |
pandy |
Jul 2 2020, 02:27 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 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.
|
sajox |
Jul 4 2020, 12:17 AM
Post
#4
|
Group: Members Posts: 9 Joined: 16-June 20 Member No.: 27,402 |
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 |
Lo-Fi Version | Time is now: 26th April 2024 - 08:59 AM |