Why CSS opacity is affecting div above it?

Question

I have overlay inside HTML element and inside that overlay I have element that contains message. But for some reson upper element gets also opacity from element under it.

EDIT: I only have tested this with latest Firefox.

Here is CSS example code to explain problem:

.overlay {
    z-index: 1000;
    border: medium none;
    margin: 0pt;
    padding: 0pt;
    width: 100%;
    height: 100%;
    top: 0pt;
    left: 0pt;
    background-color: #fff;
    opacity: 0.6;
    cursor: wait;
    position: absolute;
}
.overlay .message {
    z-index: 1001;
    position: absolute;
    padding: 0px;
    margin: auto;
    width: 30%;
    top: 15%;
    left: 30%;
    text-align: center;
    color: #fff;
    border: 3px solid red;
    background-color: #fff;
    background: fuchsia;
    font-size: 18px;
    font-weight: bold;
    padding: 5%;
}

And here is HTML code:

<div class="overlay">
    <div class="message">
        test
    </div>
</div>

Answer 1

The opacity effects not just the element itself but everything in overlay (so message too). It works if you separate the overlay and the message:

<div class="modal">
    <div class="overlay">overlay</div>
    <div class="message">message</div>
</div>

And the CSS:

.modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.overlay {
    /* … */
}
.message {
    /* … */
}

Here message is not a descendant of overlay and thus not affected by overlay’s style.

Answer 2

thanks to Gumbo also from me -- I used your code and it was exactly what I needed.