21

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;
}
Geo
  • 2,321
  • 2
  • 12
  • 19
new
  • 267
  • 1
  • 2
  • 7

4 Answers4

44

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.

Community
  • 1
  • 1
Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
  • This worked for me but, is there any option to make it not fixed ? – Pini Cheyni Apr 27 '17 at 13:36
  • @PiniCheyni Is there a problem with `fixed`? – Šime Vidas Apr 27 '17 at 16:56
  • 1
    in my case I didn't want to make it fixed, I have a dynamic page that adds elements on top of this div, instead pushing this div down it makes this div to stay fixed at this position – Pini Cheyni Apr 28 '17 at 09:29
  • @PiniCheyni Sounds like a different problem. This question is about an element that is “on top of all other controls.” Consider opening a new question and describing your problem in more detail :) – Šime Vidas Apr 28 '17 at 17:08
  • The thing is that this solution creates the issue I described not the original question – Pini Cheyni Apr 28 '17 at 17:31
  • @PiniCheyni The question is about making an element cover the entire viewport, and that’s what the code in my answer does. You have an additional requirement, so it would make most sense to create a new question. I would also need to understand the problem fully, and explaining that via comments isn’t optimal. – Šime Vidas Apr 29 '17 at 16:55
0

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.

cherouvim
  • 31,725
  • 15
  • 104
  • 153
0

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.

Arseni Mourzenko
  • 50,338
  • 35
  • 112
  • 199
0
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}
Muhammed Moussa
  • 4,589
  • 33
  • 27