Log in

View Full Version : css opacity and z-index help


screenshot
10-30-2012, 03:09 PM
Hi, this is probably a simple question, and maybe I'm overlooking something very basic. Would someone tell me why the z-index is not working for this example? I want the white box to be in front of the body background setting to black at 60%. If I remove the opacity property from the body background property, all is well, however, if I add it, the white box is dimmed by the opacity setting on the body background property. HTML and inline CSS follows:




<body style="background:#000; opacity:.6;">
<div style="border:1px solid #ccc;height:105px;z-index:2;background:#fff;" >

<p>this might take about one minute.</p>
<p class="update"></p>
<p>&lt;connecting...&gt;</p>


</div>
</body>

Thanks!
bernie1227
10-31-2012, 08:11 AM
As far as I know, the z-index property is inherited by all child elements of the element with the property. Have a look here (http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/) for a work around.
screenshot
10-31-2012, 02:14 PM
Thanks, Bernie. After reading the article you linked to, the body element is the parent to my white box div, thus the inheritance issue. So my expectation of z-index was wrong. I'll have to read up on it again. I was hoping to just use this snippet for a quick mockup demo purpose (I didn't want to use javascript/jquery lightbox, just html & inline css to quickly show a story), but I see that is not the case. To do that, I'll have to get the window size/s, create a separate div as the background and then place the white box div as its sibling -- also absolutely position the latter according to window size as well (right?). I suppose I'll just use the jquery lightbox as its quick. Thanks again I learned something today!
CasJ
11-14-2012, 11:37 AM
The Z-Index property doesn't work at all when you don't define a position property.
Deadweight
11-21-2012, 09:08 PM
True setting it to auto