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.


    CSS Howto..

    How to use css to crop images from left and right without knowing dimensions

    How to order rows (or divs) vertically using blueprint css?

    CSS How to Transition from White to Background on Hover

    How do I offset where my fixed nav bar takes me?

    How do I make my images in my div change opacity on hover?

    How to make css smaller?

    How to set div width to the width of the table in it?

    How to position a background image in reveal.js?

    How to make a sticky footer using CSS?

    How do I import 2 different files icons?

    How to get css button to stay active after it has been clicked?

    how to set responsive background-image of element using css?

    How do I make the Brand, links, and facebook link on the same line? Bootstrap 3

    How to color specific word in a container using CSS

    How to get at Apache Wicket PropertyColumn data to dynamically change CSS class based on content?

    How to Add flexibility to SASS for another color

    How to Detect css style by iPhone/iPad

    jquery ui droppable : how to dropp an element outside a div with overflow:hidden?

    How do I move the search bar to the top without hiding it? [closed]

    How to position two
    elements side by side?

    Coding the slideshow

    How would you vertically justify text with css/Javascript?

    how do I zoom a background image on a div with background-size

    How to draw arrows in CSS [closed]

    How can I set a floats width to the left over space?

    how to get value from this html date-ranger?

    how to make an image “coming” to foreground

    How to change text colour on a child structure HTML5

    How to override CSS? [closed]

    How is the “travel mode” menu in Google Maps implemented?