How to layer a

element ontop of a other elements

Tags: javascript,css,html,z-index

Problem :

How do you layer a div element ontop of other elements?
I want to make a slightly translucent div element using the opacity css option then place the div on top of the webpage to darken it then place another div with a form on top of that. I tried using the z-index but i couldn't get it to work very well. How would i do this? Is there a better way to do this? Here is the code, am i doing something wrong?

 <div style="opacity:.3; width:200; height:200; background-color:#222021; position:relative; z-index:1000;"></div>
<div style="z-index:100;">
    <form name="testform" >
    <input type="text"  placeholder="First Name"required/><br>
    <input type="text"  placeholder="Last Name" required/><br>
    <input id="submit" type="submit"  value="Submit" />
    </form> </div>

I want the div to layer on top of the other elements.(the form in this case.)

---

Solution :

Fiddle

You have to position the overlay/background fixed. With top/right/bottom/left set to 0, it will automatically fill the screen. A z-index of 16777271 will ensure it's on top of everything, as this is the cross-browser highest z-index. You can also set it to 999 or something, will do the same job I guess.

.overlay {
    z-index: 16777271;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.8);
}

The absolute centering method is grabbed from this pen, there are other methods to center something, too. The fiddle is not for production use, you should look at the pen I linked above.