Why does a masked-image ignore the z-index?

Question

I have an image that I mask in CSS. I want a text above this masked-image. It seems that the z-index is ignored.

I made a small example with my code to show the problem. To see that the z-order is depending on the mask you can hover the orange element to unset the mask.

:root{
  --text-padding: 10px;
  --octagon: url("http://i.imgur.com/9Xo9L4Z.png");
  --imageurl: url('http://i.imgur.com/jMQ5vHg.png');
}

.container{
  margin-bottom: 10px;
  border: green 3px solid;
  width: 50vw;
  height: 154px;
}

.image-container{
  width: 124px;
  height: 124px;
  margin-left: 10px;
  margin-bottom: calc(-124px / 2 - 0.5em - var(--text-padding));
  border: blue 5px solid;
  z-index: 1;
}

.wrap-image{
  cursor: pointer;
  height: 100%;
  width: 100%;
  z-index: 1;
  
  mask: var(--octagon);
  -webkit-mask-box-image: var(--octagon);
}

.wrap-image:hover{
  mask: unset;
  -webkit-mask-box-image: unset;
}

.img-src{
  content: var(--imageurl);
}
.mask-src{
  content: var(--octagon);
}

.bg-image{
  background-image: var(--imageurl);
}

.redtext{
  z-index: 100;
  color: red;
  background-color: yellow;
  padding: var(--text-padding);
}
.shiftdown{
  z-index: 100;
  margin-top: 10px;
  margin-bottom: calc(-1em - 2 * var(--text-padding));
  background-color: pink;
  padding: var(--text-padding);
}

.setdimensions{
  width: 124px;
  height: 124px;
}

h2{
  margin-top: 50px;
}

<h1>
Why does the masked-image ignore the z-index?
</h1>
<p>
The orange rectangle is masked with an image of an octagon.<br/>
Hover the orange image to unset it's mask. The z-index is applied as expected (more or less...).
</p>
<p>
<ul>
  <li>What is the explanation for that behaviour?</li>
  <li>How can we have the text above the masked image?</li>
</ul>
</p>


<h2>
Using an "div"-tag with a background-image
</h2>
<div class="container">
  <div class="shiftdown">
    This is the first line and shifted down.
  </div>

  <div class="image-container">
    <div class="wrap-image bg-image"></div>
  </div>

  <div class="redtext">
    This text should be over the masked image...
  </div>
</div>

<h2>
Using an "img"-tag for the image
</h2>
<div class="container">
  <div class="shiftdown">
    This is the first line and shifted down.
  </div>

  <div class="image-container">
    <img class="wrap-image img-src"/>
  </div>

  <div class="redtext">
    This text should be over the masked image...
  </div>
</div>

<h2>
Used image and mask
</h2>
<img class="img-src setdimensions"/>
<img class="mask-src setdimensions"/>

Best regards and many thanks in advance

Tee

I think the problem is that your unmasked element is not positioned therefore z-index does not apply, when you add the mask, it enters the stacking context and therefore the z-index of 1 applies which brings it to the front as your other elements don't have a z-index applied (as they are not positioned) — Pete, Apr 07 '20 at 13:19
https://stackoverflow.com/questions/9191803/why-does-z-index-not-work — Paulie_D, Apr 07 '20 at 13:20
Thank you very much. >> position: relative; on the text-div's solves the issue. — Tee, Apr 07 '20 at 13:28
@Pete z-index won't apply in both cases (mask or unmasked). It's about painting order here. A masked element is painted later than an unmasked one. Like a filter element, transformed element, element with opacity, etc — Temani Afif, Apr 07 '20 at 13:33
The `z-index` property only works on elements with a `position` value other than `static`. That was new to me. Glad to have something learned. Thanks to the community. — Tee, Apr 07 '20 at 13:52

Why does a masked-image ignore the z-index?

0 Answers0