How to make div on top of all other control

I want my div to show on top of everything I put 100% width and height and it show above a lot of开发者_运维百科 control except some have css z-index and other things. I tried to set the div z-index to a big number but this 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;
}

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.

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.

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.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}