CODEWITHSUNDEEP
htmlcss
Tom Squires
Tom Squires

Reputation: 9296

Opacity of absolute positioned elements

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>

Upvotes: 1

Views: 6459

Answers (2)

cchana
cchana

Reputation: 5000

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.

Upvotes: 5

techfoobar
techfoobar

Reputation: 66693

You'll be able to make it work as expected by making the following changes in your CSS:

#innerPopup
{
    position: relative; /* change this to relative - will allow you to override the parent specified opacity */

    opacity: 1;

    /* other properties */
}

Upvotes: 1

Related Questions