Stacking Order of Elements Affected by Opacity

Stacking order of elements affected by opacity

Positioned elements with a z-index value other than "auto" and elements with an opacity value less than 1 generate a stacking context. Refer to the rules regarding the painting order.

In your first example we have the root stacking context with various descendants including:

• positioned green box with positive z-index
• positioned blue box with auto z-index

The blue box with auto z-index is placed behind; green box with positive z-index is placed in front (see rule no. 8 and 9).

In your second example we have:

• an element with opacity (which contains green box; note that z-index on the green box becomes local to this element)
• positioned blue box without z-index

Both elements fall under same category (see rule no. 8). In which case the HTML order determines which element appear in front. The blue box appears later in the source order so it appears in front.

Why is my opacity declaration affecting other elements?

Change the ordering of your elements, so the image is first, and h2 and span after them. That will fix the problem.

  <img src="https://i.imgur.com/EENJU66.gif">
  <h2>Lorem Ipsum project title</h2>
  <span class="f-cta">View Project</span>

opacity value less than 1 and stacking without z-index

Looks like that MDN article is just the basic version of the actual stacking contexts explanation, which is also touched on in the visual formatting module. However, this particular gotcha is from the CSS color module (emphasis mine):

Since an element with opacity less than 1 is composited from a single
offscreen image, content outside of it cannot be layered in z-order
between pieces of content inside of it. For the same reason,
implementations must create a new stacking context for any element
with opacity less than 1. If an element with opacity less than 1 is
not positioned, implementations must paint the layer it creates,
within its parent stacking context, at the same stacking order that
would be used if it were a positioned element with ‘z-index: 0’ and
‘opacity: 1’. 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 section 9.9 and Appendix E of [CSS21] for more
information on stacking contexts. The rules in this paragraph do not
apply to SVG elements, since SVG has its own rendering model ([SVG11],
Chapter 3).

How can I change opacity without affecting other HTML elements?

Add z-index to star and it should work.

figure {    position: relative;    border: thin #c0c0c0 solid;    display: flex;    flex-flow: column;    padding: 5px;    max-width: 220px;    margin: auto;}
icon-star {    position: absolute;    font-size: 50px;    color: white;    z-index: 1;}
img {    max-width: 220px;    max-height: 150px;}
img:hover {    opacity: .7;}
figcaption {    background-color: #222;    color: #fff;    font: italic smaller sans-serif;    padding: 3px;    text-align: center;}

<figure>    <icon-star>lt;/icon-star>    <img src="https://interactive-examples.mdn.mozilla.net/media/examples/elephant-660-480.jpg" alt="Elephant at sunset">    <figcaption>An elephant at sunset</figcaption></figure>