CSS Place one div directly above the other

Question

I have a div in which there are some things, and the user has the option to click "x" to say "This does not apply to me," for example.

Instead of deleting a div, I want to play a translucent div on top of it.

I started with some complicated javascript to determine the size and location of my div in the question, and create a new one on top of it. The script was giving size and location that looked about the same as on my eye, but the div overlap was put in the wrong place.

Then I realized that there is a (possibly) much easier way to do this.

I put a div with a dimming class inside the div that I want to disable. The blackout css class has visibility set to hidden, so javascript will set it to visible when necessary.

The problem I am facing is that even with this method I can’t get it to exactly fill the rectangle that has the parent div.

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 the entire screen, not just the parent div.

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

Answer 1

This filled the entire screen, not just the parent div.

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

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

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

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

More details here: http://reference.sitepoint.com/css/containingblock

Answer 2

Using "position: absolute" sets it relative to the next "position: relative" div. If there is no one set, he will use the body.

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

Answer 3

In the parent CSS div:

 overflow: hidden; 

must work

Answer 4

Add position: relative to the parent div, overflow: hidden will hide only the outer part of your parent div

Answer 5

Change position: absolute; at position: relative;

Answer 6

Set the child <div> width and height to 100% and remove the unnecessary markup.

http://jsfiddle.net/MvPHj/