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:

Code:

<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 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!