CODEWITHSUNDEEP
htmlcss
Nick Lang
Nick Lang

Reputation: 499

css opacity stacking order

I'm try to add a white div on top of an image, then add opacity to the white layer so that I can put text over the image.

The HTML:

<div id="red">
    <div id="white">
        <div id="blue"></div>
    </div>
</div>

The CSS:

div {
    width: 300px;
    height: 300px
}
#red {
    background: red;
    position: relative;
    z-index: -15;
}
#white {
    background: white;
    opacity: 0.5;
    position: relative;
    z-index: -10;
}
#blue {
    background: blue;
    width: 100px;
    height: 100px;
    opacity: 1;
}

http://jsfiddle.net/Nd2EZ/1/

The background appears pink, which is great. But the blue box I want to appear on top, in blue - but sadly it is purple. So the blue box is a bit opaque for some reason.

How can I make the blue box appear on top, without any opacity?

Upvotes: 3

Views: 2748

Answers (5)

Jonathon
Jonathon

Reputation: 113

You could could structure your HTML like this:

<div id="red">
    <div id="white"></div>
    <div id="blue"></div>
</div>

and change your css to:

div {
    width: 300px;
    height: 300px
}
#red {
    background: red;
    position: relative;
}
#white {
    background: white;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
}
#blue {
    background: blue;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
}

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157364

Instead of using opacity, you can use rgba(Red - Green - Blue - Alpha), this will get you the desired effect..

#white {
    background: rgba(255,255,255,.5);
    position: relative;
    z-index: -10;
}

Demo

BTW, do you really need z-index :-/ ?

Upvotes: 3

Brett Caswell
Brett Caswell

Reputation: 1504

move div#blue to be a child of div#red, and than set the css style position of div#blue to absolute;

HTML

<div id="red">
    <div id="white">
    </div>
    <div id="blue"></div>
</div>

CSS

div {
    width: 300px;
    height: 300px
}
#red {
    background: red;
    position: relative;
    z-index: -15;
}
#white {
    background: white;
    opacity: 0.5;
    position: relative;
    z-index: -10;
}
#blue {
    background: blue;
    width: 100px;
    height: 100px;
    opacity: 1;
    position:absolute;
    left:0em;
    top:0em;
}

Upvotes: 0

iraycd
iraycd

Reputation: 892

Mistakes you have done are by taking them as child. The opacity effects the child. When white opacity is 0.5 when blue opacity will be 0.5 even it to 1. More documentation is here.

See this answer to understand more.

Upvotes: 0

user2246674
user2246674

Reputation: 7719

The opacity applies to all content, including children. Imagine the children being rendered first, and then having the opacity applied to this rendered content. If the element is not a child - i.e. in a different hierarchy and positioned over - then it won't be affected by the opacity of the (previous) parent.

<div id="red">
    <div id="white">
    </div>
</div>
<div id="blue"></div>

#blue {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 0;
    right: 0;
}

Upvotes: 2

Related Questions