css opacity and z-index help

Printable View

10-30-2012, 03:09 PM
screenshot

css opacity and z-index help

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><connecting...></p> </div> </body>

Thanks!
10-31-2012, 08:11 AM
bernie1227

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.
10-31-2012, 02:14 PM
screenshot

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!
11-14-2012, 10:37 AM
CasJ

The Z-Index property doesn't work at all when you don't define a position property.
11-21-2012, 08:08 PM
Crazykld69

True setting it to auto