Question

Im trying to make a popup box that causes the surrounding area to get greyed out. My issue is that the opacity of the shadow div seems to overide that of the popup. I tried changing one from absolute to fixed position and increasing the z index of the popup but neither worked.

Here is a screensot of the problem.

And below is the relevent code (ask if you need to see more)

.textPopup
{
    width: 1400px;
    height: 600px;
    background-color: White;
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    z-index: 15;
    left: 0;
    right: 0;
    top: 50px;
    bottom: 0;
    opacity: 0.2;
}
#innerPopup
{
    background-color: White;
    width: 1350px;
    height: 550px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    z-index: 15;
    left: 0;
    right: 0;
    top: 50px;
    bottom: 0;
    opacity: 1;
}

... snip
    <div id="popupShadow">
    </div>
    <div class="textPopup">
        <div id="innerPopup">
        </div>
    </div>
</body>
</html>

Answer 1

The issue you have is that #innerPopup is inside #textPopup. The opacity is then inherited by the child and cannot be overridden with it’s own property.

If it is not possible to separate them, then consider using an rgba value for the background as opposed to the opacity property:

#textPopup {
    background-color: rgba(255,255,255,0.2);
}

You can see it working on jsfiddle.