DIV overlay overtop of identical DIV

[xProteuSx]

I have a div, like this:

 

div.article

{

float: left;

min-width: 310px;

min-height: 150px;

margin-left: 2px;

margin-right: 2px;

margin-top: 5px;

background-color: #9c9c9c;

border-style: solid;

border-width: 1px;

border-color: #000;

}

 

I would like to overlay another div, with identical dimensions.  This second div would contain an semi-transparent image, that would overlay the contents of the article div.  I have been trying to do this for so long, but I can't find anything that works.

 

z-index, I know, but it just won't work for me.  Help, please!!!

[AyKay47]

well, what does the css for the other div look like atm?

Something like this should work:

 

div.other-div
{
    position: absolute;
    left: 2px;
    top: 5px;
    z-index: -1;
}

 

remember, the z-index property will only work on elements that are positioned.

[Mahngiel]

the absolute positioning of the 2nd div wouldn't help because the first div isn't positioned.  Then when you set a dynamic width on the parent div, you can set absolute positioning on the child layover.

 

 

Look at this example fiddle

http://jsfiddle.net/nDTyr/

 

[AyKay47]

the absolute positioning of the 2nd div wouldn't help because the first div isn't positioned.  Then when you set a dynamic width on the parent div, you can set absolute positioning on the child layover.

 

 

Look at this example fiddle

http://jsfiddle.net/nDTyr/

 

 

which is why I made a note of it in my reply.

[xProteuSx]

Super cool.  This works great.  Thanks guys.