4

I have a set of menu items which are link inside wrappers. Some links are supposed to be disabled at some point of time: they are grayed out and not clickable. To keep UI generation the same I decided to go with CSS-only solution which is quite simple: create a absolutely positioned ::before element which covers entire menu item with a semi-transparent black background.

This works fine until block inside link tag has filter applied. It makes nested content to appear on top of pseudo-element. Applying z-index on ::before element solves the issue however I am wondering about filter behaviour. Why does it happen?

.link {
  width: 240px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 10px;
  background-color: cyan;
  position: relative;
}

.link.disabled::before {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top : 0;
  background-color: rgba(0,0,0,0.5);
}

.link.disabled.z-index::before {
  z-index: 1;
}

.link > a {
  width: 100%;
  height: 100%;
  display: block;
  color: #fff;
}

.filter {
  filter: grayscale(1);
}
<div class="link disabled">
  <a href="normal">
    <div>Normal</div>
  </a>
</div>

<div class="link disabled">
  <a href="filter">
    <div class="filter">With filter</div>
  </a>
</div>

<div class="link disabled z-index">
  <a href="filter-z-index">
    <div class="filter">With filter + z-index</div>
  </a>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
lolbas
  • 794
  • 1
  • 9
  • 34
  • 1
    this is stacking context and painting order ... here is another fancy one : replace filter by `opacity: 0.9;` or `transform:transalte(0,0)` --> you will have the same behavior – Temani Afif Apr 07 '18 at 20:16
  • 2
    @TemaniAfif "stacking" is the word I missed when trying to search for answer... Thanks! – lolbas Apr 07 '18 at 20:18
  • 1
    finally someone thanking me for closing as duplicate and not complaining :) – Temani Afif Apr 07 '18 at 20:19

0 Answers0