Opaque Progress bar on top of overlay

Question

I have a progress bar that needs to be on top of an overlay, here is the broken jsfiddle

Markup:

<div class="overlay mouse-events-off">
    <div class="progress progress-striped active">
        <div class="bar" style="width: 40%;"></div>
    </div>
</div>

CSS:

.overlay { background-color: black; position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.2; /* also -moz-opacity, etc. */ z-index: 100; }
.progress { position: absolute; top: 50%; left: 35%; width:300px; height:20px; z-index:101; opacity:1.0; }

The progress bar is also at 20% opacity.

I have a fix by just placing the <div> that carries the progress bar outside of the overlay it works. But seems like extra mark-up

Working Markup:

<div id="progress" style="display:none;">
    <div class="progress progress-striped active glow">
        <div class="bar" style="width: 40%;"></div>
    </div>
    <div class="overlay mouse-events-off"></div>
</div>

Is there a more elegant way to solve this with just CSS?

Answer 1

When you use opacity, everything inside that element will be affected too, no workarounds.

You have two ways of doing this:

Progress Outside

Put progress outside overlay and play with it to be centered on top of overlay.

.progress {
    position: absolute;
    top: 50%;
    left: 50%;
    width:300px;
    height:20px;
    margin:-10px 0 0 -150px; //half width left, half height top
    z-index:101;
    opacity:1.0;
}

Keeping as is

Instead of using opacity on the element itself, use on the background instead!

.overlay {
    background-color: black; /*older browsers*/
    background-color: rgba(0,0,0,.2); /*new ones will overwrite the 'black' declaration with rgba*/
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*opacity:0.2; no opacity!*/
    z-index: 100;
}

Here's the jsFiddle for the second one: http://jsfiddle.net/Qpv4E/2/

Answer 2

Here's the same question: I do not want to inherit the child opacity from the parent in CSS

Hopefully the answers with RaphaelDDL's will help.