- This topic is empty.
-
AuthorPosts
-
June 6, 2010 at 4:43 am #29250JazcashMember
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:
Title of the page
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?
June 6, 2010 at 11:17 am #77174cramdesignMemberYou 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?
June 6, 2010 at 12:11 pm #77175JazcashMember"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.
June 6, 2010 at 3:50 pm #77183cramdesignMemberWould it work to have both elements contained in another parent div?
Code:Probably you already know this and it is not what you want.
June 6, 2010 at 5:02 pm #77190JazcashMember"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 :PJune 6, 2010 at 11:35 pm #77219cramdesignMemberCool… I was there too…
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.