1

I found strange behavior when coding css specifically using negative margin to stack element on other element.

I understand natural stack order that when elements overlap, later element always goes on top(not using relative, absolute positioning).

Question1: Why If former element has image element, later element go under the image?

Question2: Moreover, when later element has opacity other than 1, later element go over the former element (set back to natural order?)

HTML:

<div class="box sample1">
        <img src="http://fillmurray.com/100/100" alt="">
</div>
<div class="box sample1-2">opacity: 1</div>


<div class="box sample1-3">
    <img src="http://fillmurray.com/100/100" alt="">
</div>
<div class="box sample1-4">opacity: .9</div>

SCSS:

.box {
    width: 100px;
    height: 100px;
}
.child {
    width: 80px;
    height: 80px;
}
.sample1 {
    background-color: yellow;
    width: 300px !important;
}
.sample1-2 {
    background-color: red;
    margin-top: -40px;

    .child {
        // background-color: green;
    }
}

.sample1-3 {
    // opacity: .9;
    width: 300px;
    background-color: green;
}
.sample1-4 {
    opacity: .9; //this changes stack order
    background-color: red;
    margin-top: -40px;
}

Demo: https://jsfiddle.net/nori2tae/4w62t746/8/

Need a little explanation to this, thanks.

norixxx
  • 2,549
  • 2
  • 19
  • 26
  • this question was already asked but am not able to find it :) when you change opacity the flow is rebuilt again, and order is changed – Temani Afif Nov 28 '17 at 10:50
  • @TemaniAfif - here's a similar question: https://stackoverflow.com/questions/34740422/negative-margin-remove-background-property-of-static-siblings/34778607#34778607 - that explains why the **former** image element is rendered above the later element... as for the opacity part of the question - it's because a new stacking context is formed on an element with a opacity value less than 1 – Danield Nov 28 '17 at 10:51
  • @Danield yes this one is helpfull too, but i remember an older one with many answers :) – Temani Afif Nov 28 '17 at 10:55
  • sorry guys i was not able to find similar question here, maybe because wrong keyword search, my bad. I also googled and found an article element stack order clearly explains. https://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892 this might help someone else. – norixxx Nov 28 '17 at 11:06

1 Answers1

1

Question1: Why If former element has image element, later element go under the image?

It's because within the same stacking context - inline-level elements (such as the image) are painted above non-inline-level elements (see this post)

This article has a nice image to sum up the stacking order of elements within the same stacking context:

enter image description here

Question2: Moreover, when later element has opacity other than 1, later element go over the former element (set back to natural order?)

It's because a new stacking context is formed on an element with a opacity value less than 1.

From the spec: (bold mine)

If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created.

See all this MDN article on stacking contexts.

Danield
  • 121,619
  • 37
  • 226
  • 255