/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Feb 16.2013

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:
[url]http://kconstable.com/VaporPress/wordpress/[/url]

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>

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@COBOLdinosaurFeb 17.2013 — 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.
Copy linkTweet thisAlerts:
@keithiopianauthorFeb 17.2013 — 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>[/CODE]
Copy linkTweet thisAlerts:
@keithiopianauthorFeb 17.2013 — 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
Copy linkTweet thisAlerts:
@COBOLdinosaurFeb 17.2013 — Does that make sense?
[/QUOTE]

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.
Copy linkTweet thisAlerts:
@keithiopianauthorFeb 17.2013 — 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.
×

Success!

Help @keithiopian spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...