Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Weird behavior when combining opacity & z-index: -1
/**
* Weird behavior when combining opacity & z-index: -1
*/
div {
position: relative;
width: 200px; height: 200px;
background: yellowgreen;
/* Try commenting this or setting it to 1: */
opacity: .9;
}
div > div {
position:absolute;
z-index: -1;
width: 200px; height: 200px;
background: #d00;
}
<div>
<div></div>
</div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment