CSS - Opacity could change the z-index

by Julien Roche

HTML

<div id="ontop" >
  <span class="red">z-index:10</span>
</div>
<div>
  <span class="green">z-index:2</span>
</div>
<div>
  <span class="blue">z-index:1</span>
</div>

<button id="foo">Toggle "opacity:0.99;" to red div</button>

CSS

.red, .green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}
span {
  opacity: .95;
}

.red {
  z-index: 10;
  top: 20px;
  left: 80px;
  background: red;
}

.green {
  z-index: 2;
  top: 80px;
  left: 20px;
  background: green;
}

.blue {
  z-index: 3;
  top: 100px;
  left: 100px;
  background: blue;
}

.ontop--opacity {
  opacity: 0.99;
}

button {
  position: absolute;
  top: 230px;
}

Babel + JSX

let onTopElement = document.querySelector('#ontop');

document
.querySelector('#foo')
.addEventListener('click', (event) => {
	onTopElement.classList.toggle('ontop--opacity');
}, false);