Stacking Order

by Matthew Day

HTML

<div id="element">
  </div>

CSS

div {
  width: 100px;
  height: 100px;
  background: thistle;
  position: absolute;
  top: 0;
  left: 0;
}

div:before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  background: crimson;
  z-index: -1;
}

div:after {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100%;
  height: 100%;
  background: cornsilk;
  z-index: -20;
}

JavaScript

// experiementing with stacking order
// note the position: fixed on the pareent element itself (not a pseudo element) seems not only to ignore the stacking order but also respects width and height setting. position: fixed on one of the pseudo elements respects the stacking order but ignores width and height
// some of the comments at https://stackoverflow.com/questions/3032856/is-it-possible-to-set-the-stacking-order-of-pseudo-elements-below-their-parent-e may be helpful to understanding this a little more