how to make div in top of all other control

Question

i want my div to show in top of every thing i put 100% for width and hight and it show above alot of contorl except some have css z-index and other things i try to put my div z-index big number but did not work

{
    width: 100%;
    height: 100%;
    top: 5px;
    left: 0px;
    background-color: #FFFFFF !important;
    padding: 10px;
    overflow: hidden;
    visibility: visible;
    display: block;
    z-index: 500 !important;
    position: relative;
}

Answer 1

In order to pull an html element out of the natural flow of how the elements are layed out on the screen you need to use position: absolute. This will allow the element to become a layer above the other elements (assuming that the z-index value is greater than all other's).

Right now your element seems to have position: relative.

Answer 2

Probably the issue is related to position:relative. Set it to absolute instead, and if you need to offset the element, use margin instead of top/left.

Answer 3

Since you want to cover the whole screen, I recommend this:

#overlayDiv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:99;
}

Note, you don't have to set the display and visibility properties. Also, don't set padding or margin on this element! If you want it to have a padding, set a margin on its child/children.

Also, make sure that the DIV in question is a direct child of the BODY element.

BTW, you can see an demo of this technique at my w3viewer.com (click on the "About" link in the bottom left corner).

Answer 4

Could it be, that the problem only exists with selects and in IE6? If so, look at the answers here.