Offspring that has opacity will not be able to show up beneath the sibling of their parent with z-index

Question

Offspring that has opacity will not be able to show up beneath the sibling of their parent with z-index

I'm perplexed by the behavior of stacking order when applying an opacity level other than 1 to a child element. It seems that setting any other opacity value causes the child element to always dominate its siblings in terms of stacking.

.element {
  width: 500px;
  height: 100px;
  background: orangered;
}

.child {
  height: 150px;
  width: 100px;
  background: grey;
  
  opacity: 0.5;
  z-index: 1;
}

.sibling {
  width: 400px;
  height: 100px;
  background: skyblue;
  
  z-index: 2;
}

<div class="element">
  <div class="child"></div>
</div>
<div class="sibling"></div>

If the opacity property is removed (or set back to 1) for the .child element, it behaves as expected and stacks behind the .sibling element. However, any non-1 opacity values seem to alter this stacking relationship. This leads me to think that .element might be establishing a stacking context, although upon review, I couldn't find evidence of this based on MDN's criteria.

The CSS standard doesn't offer much insight into this:

It mentions that an element with less than full opacity creates a new stacking context, but beyond that, there isn't guidance on how opacity impacts stacking orders within elements. My example involving .child suggests that while it may create a stack context internally, its position relative to surrounding elements remains consistent. Further tests using display: flow-root confirm this behavior even without the opacity adjustment.

So what exactly is happening here?

html css

Answer 1

Answer №1

Initially, the application of the z-index seems unnecessary as no elements are positioned (source). The code can be simplified as shown below:

.element {
  width: 500px;
  height: 100px;
  background: orangered;
}

.child {
  height: 150px;
  width: 100px;
  background: grey;
  
  opacity: 0.5;
}

.sibling {
  width: 400px;
  height: 100px;
  background: skyblue;
}

<div class="element">
  <div class="child"></div>
</div>
<div class="sibling"></div>

The issue is not about stacking context but rather painting order. Your reference to stacking context is accurate, but irrelevant in this scenario as there are no elements within .child.

According to your quote:

If an element with opacity less than 1 is not positioned, then it is painted on the same layer, within its parent stacking context, as positioned elements with stack level 0.

By examining the painting order,

All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order

From the explanation stated above, it's evident that an element with opacity less than 1 will be painted like positioned elements at step (8). Other elements without a stacking context will be painted before them:

For all its in-flow, non-positioned, block-level descendants in tree order:

Replacing opacity with position:relative would yield the same result.

.element {
  width: 500px;
  height: 100px;
  background: orangered;
}

.child {
  height: 150px;
  width: 100px;
  background: grey;
  
  position:relative;
}

.sibling {
  width: 400px;
  height: 100px;
  background: skyblue;
}

<div class="element">
  <div class="child"></div>
</div>
<div class="sibling"></div>

If you make the sibling element positioned, it will also be painted in step (8) and appear above the .child due to following the tree order.

.element {
  width: 500px;
  height: 100px;
  background: orangered;
}

.child {
  height: 150px;
  width: 100px;
  background: grey;
  
  opacity:0.5;
}

.sibling {
  width: 400px;
  height: 100px;
  background: skyblue;
  
  position:relative;
}

<div class="element">
  <div class="child"></div>
</div>
<div class="sibling"></div>

In conclusion, creating a stacking context becomes relevant when dealing with child elements, as it dictates their painting order inside that context.

For further details, refer to these related questions:

Why can't an element with a z-index value cover its child?

Why does position:relative; appear to change the z-index?

Answer 2

Initially, the application of the z-index seems unnecessary as no elements are positioned (source). The code can be simplified as shown below:

.element {
  width: 500px;
  height: 100px;
  background: orangered;
}

.child {
  height: 150px;
  width: 100px;
  background: grey;
  
  opacity: 0.5;
}

.sibling {
  width: 400px;
  height: 100px;
  background: skyblue;
}

<div class="element">
  <div class="child"></div>
</div>
<div class="sibling"></div>

The issue is not about stacking context but rather painting order. Your reference to stacking context is accurate, but irrelevant in this scenario as there are no elements within .child.

According to your quote:

If an element with opacity less than 1 is not positioned, then it is painted on the same layer, within its parent stacking context, as positioned elements with stack level 0.

By examining the painting order,

All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order

From the explanation stated above, it's evident that an element with opacity less than 1 will be painted like positioned elements at step (8). Other elements without a stacking context will be painted before them:

For all its in-flow, non-positioned, block-level descendants in tree order:

Replacing opacity with position:relative would yield the same result.

.element {
  width: 500px;
  height: 100px;
  background: orangered;
}

.child {
  height: 150px;
  width: 100px;
  background: grey;
  
  position:relative;
}

.sibling {
  width: 400px;
  height: 100px;
  background: skyblue;
}

<div class="element">
  <div class="child"></div>
</div>
<div class="sibling"></div>

If you make the sibling element positioned, it will also be painted in step (8) and appear above the .child due to following the tree order.

.element {
  width: 500px;
  height: 100px;
  background: orangered;
}

.child {
  height: 150px;
  width: 100px;
  background: grey;
  
  opacity:0.5;
}

.sibling {
  width: 400px;
  height: 100px;
  background: skyblue;
  
  position:relative;
}

<div class="element">
  <div class="child"></div>
</div>
<div class="sibling"></div>

In conclusion, creating a stacking context becomes relevant when dealing with child elements, as it dictates their painting order inside that context.

For further details, refer to these related questions:

Why can't an element with a z-index value cover its child?

Why does position:relative; appear to change the z-index?

Answer 3

Answer №2

If you want to maintain the height of .element but prevent .child from overflowing outside of it, you can simply add the CSS property overflow: hidden to .element.

.element {
  width: 500px;
  height: 100px;
  background: orangered;
  overflow: hidden;
}

.child {
  height: 150px;
  width: 100px;
  background: grey;
  
  opacity: 0.5;
  z-index: 1;
}

.sibling {
  width: 400px;
  height: 100px;
  background: skyblue;
  
  z-index: 2;
}

<div class="element">
  <div class="child"></div>
</div>
<div class="sibling"></div>

Answer 4

If you want to maintain the height of .element but prevent .child from overflowing outside of it, you can simply add the CSS property overflow: hidden to .element.

.element {
  width: 500px;
  height: 100px;
  background: orangered;
  overflow: hidden;
}

.child {
  height: 150px;
  width: 100px;
  background: grey;
  
  opacity: 0.5;
  z-index: 1;
}

.sibling {
  width: 400px;
  height: 100px;
  background: skyblue;
  
  z-index: 2;
}

<div class="element">
  <div class="child"></div>
</div>
<div class="sibling"></div>

Offspring that has opacity will not be able to show up beneath the sibling of their parent with z-index

Answer №1

Answer №2

Similar questions

Issue with tab focus causing dropdown menu to be unresponsive

Obtain the URL of the chosen file from the input file in an HTML/AngularJS framework

Assistance with CSS Flexbox: How to align items in a grid format (images, titles, text)

Create a JavaScript script within a CSS file

Ways to include the name of the parent element in a child element

How can you add a border before and after text as well as around the entire box

Create a div element that is set to be 30 pixels smaller than its containing div

Incorporating the parent object into a nested JavaScript function

What is the purpose of setting the image border to inline block?

The template in AngularJS route fails to display

Can we incorporate modulo into the loop?

The amazing property of AngularJS - Scope

Creating an arrow dialog box in Material UI: A step-by-step guide

Looking for recommendations on effective jQuery plugins for drag and drop file uploading?

Interacting with a PNG file using a border radius in Internet Explorer 9 is causing issues with its transparency

Having two ng-click events and two distinct classes in an ng-repeat based on the selected option

Show equally sized elements using a grid system

Performing functions in a sequence with JQuery

HTML5 Boilerplate and optimizing the critical rendering path by deferring scripts and styles

Trouble with card alignment in Bootstrap