When an image is a child of the parent content and another element has opacity set, the CSS stack order will be altered

Question

When an image is a child of the parent content and another element has opacity set, the CSS stack order will be altered

Recently, I came across an interesting issue while working with CSS, particularly with negative margins to stack elements on top of each other.

I am aware of the natural stack order in which elements overlap, where the later element always appears on top without using relative or absolute positioning.

Here are a couple of questions that I encountered:

Question1: Why does the later element go under the image if the former element contains an image?

Question2: Furthermore, why does the later element go over the former element when it has an opacity value other than 1 (is it somehow resetting the natural order)?

Below is the HTML and SCSS code snippets for reference:

<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>

For a detailed explanation and a demo, please visit the following link: https://jsfiddle.net/nori2tae/4w62t746/8/

I would appreciate some insights or explanations on this matter. Thank you!

css css-position z-index

Answer 1

Answer №1

Query1: What is the reason for the later element to go under the image if the former element has an image element?

It happens because, within the same stacking context, inline-level elements (like the image) are painted above non-inline-level elements. More information can be found in this post.

You can get a clearer understanding of the stacking order of elements within the same stacking context from this article which includes a helpful image:

https://i.sstatic.net/y7AHS.png

Query2: Furthermore, why does the later element go over the former element when the later element has opacity other than 1 (reverting to natural order)?

This happens because a new stacking context is created on an element with an opacity value less than 1.

As per the spec: (emphasis added)

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’ due to the creation of a new stacking context.

For detailed information on stacking contexts, refer to this MDN article.

Answer 2

Query1: What is the reason for the later element to go under the image if the former element has an image element?

It happens because, within the same stacking context, inline-level elements (like the image) are painted above non-inline-level elements. More information can be found in this post.

You can get a clearer understanding of the stacking order of elements within the same stacking context from this article which includes a helpful image:

https://i.sstatic.net/y7AHS.png

Query2: Furthermore, why does the later element go over the former element when the later element has opacity other than 1 (reverting to natural order)?

This happens because a new stacking context is created on an element with an opacity value less than 1.

As per the spec: (emphasis added)

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’ due to the creation of a new stacking context.

For detailed information on stacking contexts, refer to this MDN article.

When an image is a child of the parent content and another element has opacity set, the CSS stack order will be altered

Answer №1

Similar questions

A unique feature where a bar emerges from the bottom of the screen, smoothly glides upwards, and then securely fastens to

Anyone able to solve this mysterious CSS alignment problem?

Error: The property 'classList' of null is unreachable for HTMLImageElement

The issue I'm facing involves Materialize CSS interfering with the rendering of input fields from PrimeNG. Does anyone have a solution to resolve

The page is not loading correctly until a refresh is done

Error encountered during the construction of the dojo due to a CSS syntax

Left-aligned and centered - Bootstrap

Designing the appearance of a jQuery UI range slider

I am interested in implementing a feature that automatically saves form data when changes are made. My solution involves creating a dynamic form utilizing

Differences in font sizes across various browsers on Mac devices

What is the best way to center the text in the middle of a flex container?

Incapable of utilizing CSS Custom Properties (also known as CSS Variables) in conjunction with SASS @if Conditional Statements

Maintaining consistent div height in Bootstrap 4 flexbox design

Creating a continuous loop animation with CSS hover state

The layout created with Tailwind did not meet our expectations in terms of the value obtained

designing a corner tab element

Having trouble hiding the hamburger menu depending on the screen width

Utilize CSS to ensure that images are equal in height to their container element

toggle visibility of <li> elements using ng-repeat and conditional rendering

Set a predefined height for an element, yet ensure it adjusts to fit within its container (with the option to overflow only if it reaches a minimum specified height)