www.webdeveloper.com
Results 1 to 6 of 6

Thread: Child <div> w/ z-index disappears when parent <div> is assigned a background color

  1. #1
    Join Date
    Feb 2013
    Posts
    4

    Child <div> w/ z-index disappears when parent <div> is assigned a background color

    I assigned a div an index value of -2 which worked fine, but then to set a background color at 100% I added a parent <div> and set the background color to it. When I set the background color, the z-index div disappeared, if I take away the background color off then the z-index div appears. How can I set a background color to this div and still have the blue accents visible?

    Here is the beginning of my site:
    http://kconstable.com/VaporPress/wordpress/

    The blue accents are the z-index div's (class="blueBackerBottom"), when I add a background color to id="grey" they are no longer visible.

    This is the

    <body>
    <div id="grey">
    <div id="pageWrap">
    <header>
    <div id="headerBacker">
    <div id="logo"><a href="index.html"><img src="" width="" height="" border=""></a></div>
    <nav>
    <ul>
    <li></li>
    <li></li>
    </ul>
    </nav>
    </div> <!-- headerBacker -->
    <div class="blueBackerBottom"></div>
    </header>

  2. #2
    Join Date
    Aug 2012
    Location
    Canada
    Posts
    56
    Why would you set a negative z-index? That tells the browser to put the parent on top of the div. You should not even need a z-index.

  3. #3
    Join Date
    Feb 2013
    Posts
    4
    The negative z-index is to drop the blue accent (#blueBackerBotom) behind the content blocks (in this snippet, <header>), the z-index is dropping it behind <header>. Basically

    Code:
    <body>
    <div id="grey">
        <div id="pageWrap">
            <header>
    ...header content...
    
                <div class="blueBackerBottom"></div>
            </header> 
    
    ....main page content...
    
        </div id="pageWrap">
    </div id="grey">
    </body>

  4. #4
    Join Date
    Feb 2013
    Posts
    4
    For clarification on that snippet above. <div id="grey"> is the overall parent <div> I added to set a background color at a width of 100%. <header> is the parent of <div class="blueBackerBottom"> (which is just the blue accent block sent to the background of <header>. I am trying to keep <div class="blueBackerBottom"> as the background of <header> but still want to apply an overall backgound color to <div id="grey">. Does that make sense?

    Thanks

  5. #5
    Join Date
    Aug 2012
    Location
    Canada
    Posts
    56
    Does that make sense?
    No! If you need a given background image or color; then set it as a background. Playing the stacking order is just going to make maintenance a stroke causing experience. You are not going to accomplish anything of value with an approach like this. It make exactly zero sense.

  6. #6
    Join Date
    Feb 2013
    Posts
    4
    ahh, figured it out... quite simple actually. 1 z-index on one block... not much of a maintenance issue at all but then I guess my stroke causing stress level is set to a much lower threshold than others.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles