How do I cover one div with another via z-index

Question

Referring in this instance

I can not get the div with id="covered" on top of the div with id="cover" simply by using the z-index.

Is there any other solution?

Code from http://codepen.io/anon/pen/jhgtf :

HTML:

<div id="cover"></div>
<div id="covered"></div>

CSS:

#cover{
  position:fixed;
  width:800px;
  background:black;
  height:350px;
  z-index:10;
}
#covered{
  width:80px;
  background:yellow;
  height:50px;
  z-index:11;
}

Answer 1

You need to specify a position on #covered:

#cover{
  position:fixed;
  width:800px;
  background:black;
  height:350px;
  z-index:10;
}
#covered{
  position: fixed;
  width:80px;
  background:yellow;
  height:50px;
  z-index:11;
}

CodePen example

Elements with static (default) positioning are not affected by z-index - only positioned elements with fixed, relative, or absolute positioning are. Which of those you should use is dependent on context.

Official z-index specification

Answer 2

#covered{
  position:relative;
  width:80px;
  background:yellow;
  height:50px;
  z-index:11;
}