Menu
I would like to have the Wrapper-Top layer on top of the other one. I set z-index and position, which should be sufficient. Am I missing something? Here is the website: Thank you 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;
}
662
No, z-index cannot be applied to a background image.
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
The z-index of elements inside of a stacking context are always relative to the parent's current order in its own stacking context.
In order for z-index to have any effect at all, it needs to be applied to a positioned element, that means, an element with position relative , absolute , fixed , or sticky . If you don't apply a z-index , the elements will be stacked in the order they are written in the HTML. Check this example: HTML.
You are missing a position attribute on .Wrapper-Top.
z-index on MDN
Initial value: auto
Applies to: positioned elements
Inherited: no
When it isn't present, your z-index:20 in .Wrapper-Top is doing nothing.
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
