Question

I am attempting to have one div hovering over another div full of content. This can be done using position:absolute and z-index. The problem is I want the hovering div to be the same height and width of the div full of content.

I’ve tried 100% height and width, but since I wrote:

<div class=hover></div><div id=content>FULL OF CONTENT</div>

the hover div doesn’t recognize what the height and width of the content div is.

Any suggestions?

Answer 1

Put the hovering div inside the other div:

/* CSS */
#content {
  position: relative;
}
.hover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

<div id="content">
  Content goes here.
  <div class="hover">
  </div>
</div>

The hover div may be only over the content. If you set any borders or margins on the outer div, the hover div will not cover that.