CODEWITHSUNDEEP
cssz-index
dkjain
dkjain

Reputation: 881

Why does div with lower opacity in same stacking context (but later in html) stack above div with higher opacity

I know that opacity creates a new stacking context as demonstrated in this post by Philip Walton.

In following code, setting opacity: .8 of 2nd child div is lower than the opacity: .9 of 1st child wrapper still 2nd child appears above 1st child div. Why?

HTML 

  <div id="wrapper">
    <div class="block top">
      Lorem ipsum dolor immet. Lorem ipsum dolor immet. Lorem ipsum dolor immet. Lorem ipsum dolor immet. Lorem ipsum dolor immet. Lorem ipsum dolor immet. 
    </div>
    <p class="block bottom">In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. In-flow para. </p>
  </div><!-- END HTML -->

</body>

CSS

.block{
  width: 200px; padding: 10px;
  border: 2px solid;
  background-color: yellow }

.top { 
    margin-bottom: -70px;
    opacity: .9 }

.bottom {
  opacity: .8;
  background-color: red;
  margin: 0 }

https://jsfiddle.net/fy9sznjp/1/

Can someone tell me as to why lower opacity child stack over higher opacity div.

Upvotes: 0

Views: 48

Answers (1)

t.niese
t.niese

Reputation: 40862

Both elements have an opacity property that is different to 1, so bottom is displayed over top, the value of opacity, does not determine in which order they are drawn. It just matters if opacity is different to 1.

Upvotes: 2

Related Questions