Stacking Context Demo

by Kyle Mitofsky

HTML

<div><span class="red">Red</span></div>
<div><span class="green">Green</span></div>
<div><span class="blue">Blue</span></div>










<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/19850037/1366033'>Override CSS Stacking Context</a><br/>
    Adapted From this Article: <a href='http://philipwalton.com/articles/what-no-one-told-you-about-z-index/'>What No One Told You About Z-Index</a><br/>
<div>

CSS

.red, .green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}
.red {
  z-index: 1;
  top: 20px;
  left: 20px;
  background: red;
}
.green {
  top: 60px;
  left: 60px;
  background: green;
}
.blue {
  top: 100px;
  left: 100px;
  background: blue;
}
div:first-child {
  opacity: .99;
}