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

**keithiopian** · 02-15-2013, 08:38 PM

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> 
<div class="blueBackerBottom"></div>
</header>

**COBOLdinosaur** · 02-17-2013, 08:59 AM

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.

**keithiopian** · 02-17-2013, 09:10 AM

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>

**keithiopian** · 02-17-2013, 09:17 AM

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

**COBOLdinosaur** · 02-17-2013, 09:31 AM

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.

**keithiopian** · 02-17-2013, 09:38 AM

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: Child <div> w/ z-index disappears when parent <div> is assigned a background color

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions