Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Layering child elements to front

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #29250
    Jazcash
    Member

    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?

    #77174
    cramdesign
    Member

    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?

    #77175
    Jazcash
    Member
    "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.

    #77183
    cramdesign
    Member

    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.

    #77190
    Jazcash
    Member
    "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

    #77219
    cramdesign
    Member

    Cool… I was there too…

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.