HTML - Css : z-index not working with relative positions

I've understood that z-index needs that the div is positioned.

Then, I don't know why it doesn't work in my case :

html {
  height: 100%;
}
body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#signDiv {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
}
#infoDiv {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10;
}

<body>
  <div id="signDiv">
    ...
  </div>

  <div id="infoDiv">
    ...
  </div>
</body>

The two divs are not superposed, a solution ?

Thank you very much

Solution

You're sort of right that declaring a position on an element will make its z-index property kick in. But in your example, because of the order of your elements in the HTML, infoDiv will already be on top by default in terms of z-index. You don't even need z-index.

What you need is to set their positions to absolute instead of relative.

Something like that: http://codepen.io/memoblue/pen/xOBBxK