CODEWITHSUNDEEP
htmlcssz-index
zbeyens
zbeyens

Reputation: 321

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

Upvotes: 3

Views: 1923

Answers (2)

2PM
2PM

Reputation: 26

html {
  height: 100%;
}
body {
   margin: 0px;
   padding: 0px;
}
#signDiv {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}
#infoDiv {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}
<body>
  <div id="signDiv">
    ...1
  </div>

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

Upvotes: 0

Yann
Yann

Reputation: 604

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

Upvotes: 2

Related Questions