Layering child elements to front

[Jazcash]

So, the basic jist of my question is, "How do you layer inner div’s so they’re in front of their parent div?"
At first, I thought, "Z-index!", tried it, and nothing happened :(

Here’s an example:

HTML:

Code:

CSS:

Code:

#blockA{
position: relative;
margin-left: auto;
margin-right: auto;
width: 500px;
height: 150px;
background-color: #ccc;
z-index: 10;
}

#blockB{
position: absolute;
width: 250px;
height: 50px;
background-color: #666;
z-index: 5;
}

I want blockB to be positioned inside blockA, however, I also want blockA to be in front of blockB so you can’t see blockB. How would I do this?

[cramdesign]

You can’t move a parent element above a child… So, what you want can’t be done. Why does one have to be a child of the other?

[Jazcash]

"cramdesign" wrote:

You can’t move a paren element above a child… So, what you want can’t be done. Why does one have to be a child of the other?

Oh ok, well, I guess I’ll try and use some funny work around. Basically I’m using the parent div for the content of my site which would use a diagonal transparent background, and I’m using the child div for the solid image background that would be applied behind the content element. I want the content background to be in front of the solid background, but want the solid background to be inside the content element for the positioning.

In this simple example, I’d want blockB to be inside blockA because of the positioning, but want blockA to be in front of blockB.

I can achieve the effect I want in my actual site using multiple images in one statement, however, IE doesn’t support those so I’m not going to use that.

[cramdesign]

Would it work to have both elements contained in another parent div?

Code:

Probably you already know this and it is not what you want.

[Jazcash]

"cramdesign" wrote:

Would it work to have both elements contained in another parent div?

Code:

Probably you already know this and it is not what you want.

That’s exactly what I wanted, thanks ^_^
As you can guess, I’m new to web design :P

[cramdesign]

Cool… I was there too…

[Author]

Posts