Menu
I have a div wrapper and a div row and both have position properties set to relative. The wrapper div has a higher z-index than the inner div and both have background's set, however, the higher z-index background is still below the lower div's background. JS Fiddle Example
.wrapper {
position: relative;
z-index: 1000;
border: 1px solid black;
width: 131px;
height: 25px;
background: repeating-linear-gradient( to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 10px, black 11px, black 1px);
}
.row {
position: relative;
z-index: -1;
margin-top: 2px;
margin-bottom: 1px;
width: 100%;
height: 20px;
background: linear-gradient( to right, rgba(255, 0, 0, 0) 50%, red 50%);
}<div class="wrapper">
<div class="row"></div>
</div>
849
You set z-index on a static element By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
To sum up, most issues with z-index can be solved by following these two guidelines: Check that the elements have their position set and z-index numbers in the correct order. Make sure that you don't have parent elements limiting the z-index level of their children.
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).
If you want the grid lines over the red bar, remove the z-index from the wrapper div:
.wrapper {
position: relative;
border: 1px solid black;
width: 131px;
height: 25px;
background: repeating-linear-gradient( to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 10px, black 11px, black 1px);
}
.row {
position: relative;
z-index: -1;
margin-top: 2px;
margin-bottom: 1px;
width: 100%;
height: 20px;
background: linear-gradient( to right, rgba(255, 0, 0, 0) 50%, red 50%);
}<div class="wrapper">
<div class="row"></div>
</div>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
