CSS Place one div directly over another

Question

I have a div which has some stuff in it, and the user has the option of clicking an 'x' to say "This is not applicable to me", for example.

Rather than delete the div, I want to play a translucent div on top of it.

I started off with some complicated javascript to determine the size and location of my div in question, and create a new one on top of it. The script was giving a size and location which looked approximately right to my eye, but the overlap div was being put in the wrong spot.

Then I realised that there is (probably) a much simpler way to do this.

I put a div with class "blackout" inside the div I want to black out. The blackout css class has a visibility set to hidden, so javascript will set that to visible when needed.

The issue I'm having is that even with this method, I can't seem to get it to precisely fill the rectangle the parent div has.

I had

.blackout
{
  position: absolute;

  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;

  background-color: black;

  opacity: 0.5;
  filter: alpha(opacity = 50);
}

This filled up the whole screen rather than just the parent div.

What do I need to change to make it fill the parent div only?

Answer 1

This filled up the whole screen rather than just the parent div.

What do I need to change to make it fill the parent div only?

You need to add position: relative to the parent div.

That will set the parent div as the "containing block" for .blackout:

If the value of the position property is absolute, the containing block is the nearest positioned ancestor—in other words, the nearest ancestor whose position property has one of the values absolute, fixed, or relative.

Read more here: http://reference.sitepoint.com/css/containingblock

Answer 2

Using "position:absolute" positions it in relation to the next "position:relative" div. If there isn't one set then it will use the body.

You need to make the parent div CSS contain "position:relative"