lightbox: problem in making the rest of the screen transparent

Designing a web site in which i've used a lot of background:rgba in many places.hence,when i tried to make a lightbox in which i'm using background: rgba(0, 0, 0, 0.6) !important; to make the rest of the screen transparent -- not working as the background from other elements are getting applied (as expected).

Tried to use z-index to implement the lightbox,but failed

I'm bad at explaining,so here's the code

<html>
<style type="text/css">
.element{
    height: 200px;
    width: 300px;
    background: rgba(255,255,255,0.5);
    z-index: 1;
    border:1px solid black;
    position: relative;
    margin: 0 auto;}
.black{
    position: relative;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 200;}
</style>
<body class="black">
<div class="element">Hello,i have to go to the background
    but am not going cos my immediate parent isnt
    letting me,even though my grand dad asked me to!!.. 
</div>
</body>
</html>

As you can c,the div is not in the background but in the foreground.Without the background set within the div -- this can be solved,but the site i'm working on has too many backgrounds to get rid of(so,cant do that)

Please help, Newbie

Solution

If I understand your question, you want a transparent overlay to cover the entire screen underneath the lightbox.

The proper way to do this is to create a full screen floating div to cover the entire screen. The css would look like this.

.overlay {
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    background: rgba(0, 0, 0, 0.6);
    z-index: 0;
}

Then add a <div class="overlay"></div>