All geek questions in one place

Z-index absolute positioning background image

I would like to have a Wrapper-Top layer on top of another. I set the z-index and position , which should be enough. Did I miss something? Here is the site : Thanks in advance.

EDIT: here is the code I used:

 <body> <div class="Wrapper-Top"> </div> <div class="Wrapper-Middle"> hjklhjkhkjlhjkl </div> </body> 
 .Wrapper-Top { min-width: 980px; width: 100%; height: 179px; top: 0px; left: 0px; background:url(img/header-bg.png) repeat-x 50% 0%; z-index: 20; } .Wrapper-Middle { min-width: 980px; width: 100%; height: 300px; margin: 0 auto; background: #eee; top: 160px; left: 0px; position: absolute; z-index: 10; text-align: center; }
+5
source share
3 answers

You are missing the position attribute in .Wrapper-Top .

MDN z-index

Initial value: auto

Applies to: positioned elements

Inherited: no

When not there, your z-index:20 in .Wrapper-Top does nothing.

+5
source

I think this is what you want.

 <body> <div class="Wrapper-Middle"> hjklhjkhkjlhjkl </div> <div class="Wrapper-Top"> </div> 

 .Wrapper-Top{ min-width: 980px; width: 100%; height: 179px; top: 0px; left: 0px; background: url(img/header-bg.png) repeat-x 50% 0%; z-index: 20; position: absolute; } .Wrapper-Middle{min-width: 980px; width: 100%; height: 300px; margin: 0 auto; background: #eee; top: 0px; left: 0px; z-index: 10; text-align: center; }
0
source

use absolute position like this and the highest z-index value you want from the top. like this

 .Wrapper-Top{top: 0px; left: 0px; position:absolute; z-index: 2; } .Wrapper-Middle{top: 160px; left: 0px; position: absolute; z-index: 1;}
0
source

Source: https://habr.com/ru/post/1482513/

More articles:


All Articles