z-index

Z-index

  • If boxes do overlap, the elements that appear later in the HTML code sit on top of those that are earlier in the page

  • Z-index allows you to control which elements appear on top when elements overlap


.positioned {
  position: absolute;
  top: 30;
  left: 50;
  z-index: 10;
}

  • z-index property accepts a number, the higher the number, the closer that element will be to the front

Live Example

JS Bin on jsbin.com