Reputation: 2076

z-index does not work in div under overlay

This is an image depicting my problem

The grey overlay is on top of the body tree and has the following css:

overlay{
    z-index: 500;
    background: black;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    display: none;
}

The div beneath the overlay (with the top border) has the following css

inside_div{
    height: 575px;
    width: 50%;
    float: left;
    border: 2px solid green;
    padding:20px;
    overflow-y:scroll;
}

This class is added to .inside_div dinamically:

.inside_div(another_class_added_dinamically){
    outline: none;
    border-color: green;
    box-shadow: 0 0 10px green;
    opacity: 1;
    -webkit-animation: glow 0.7s infinite alternate;  
     -webkit-transition: border 0.7s linear, box-shadow 0.7s linear;
       -moz-transition: border 0.7s linear, box-shadow 0.7s linear;
            transition: border 0.7s linear, box-shadow 0.7s linear;
}

And all elements inside the "inside_div" are added the following class dinamically: (notice the following one affects all children too with the '*')

.inside_div(another_class_added_dinamically), .inside_div(another_class_added_dinamically) *{
    z-index: 1000 !important;
}

However, as seen in the image, not all elements stand out (the background inside the div remains grey). I would need to know a way of toggling the two previous classes dinamically to highlight the elements as described. What exactly is wrong here? Thank you very much for your help

Upvotes: 0

Answers (3)

Willem Dehaes

Reputation: 91

A bit late with this answer, but your problem could be caused by the fact that your overlay div has an opacity < 1. As a result, a new stacking context is being created, which might explain the behavior you see. It's hard to tell without seeing all of your code. Here is an excellent article explaining stacking context in more detail: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Upvotes: 0