z-index; position

by jshacker

HTML

<div id="minus-one">-one</div>
<div id="minus-two">-two</div>
<div id="minus-three">-three</div>
<div id="zero">zero</div>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>

CSS

body {
  width: 350px;
  height: 350px;
}

div {
  position: relative;
  height: 200px;
  width: 200px;
  color: white;
}
#one {
  z-index: 1;
  background-color: red;
  top: -800px;
  left: 150px;
}
#two {
  z-index: 2;
  background-color: green;
  top: -950px;
  left: 200px;
}
#three {
  z-index: 3;
  background-color: blue;
  top: -1100px;
  left: 250px;
}
#minus-one {
  z-index: -1;
  background-color: cyan;
}
#minus-two {
  z-index: -2;
  background-color: magenta;
  top: -150px;
  left: 50px;
}
#minus-three {
  z-index: -3;
  background-color: yellow;
  top: -300px;
  left: 25px;
}
#zero {
  z-index: 0;
  background-color: white;
  top: -575px;
  left: 75px;
  color: black;
}