CSS - Position element above others and in the middle of screen

Question

I want to position a div in the middle of the screen, above all other elements so it makes them unclickable and covers them with its background.

.myElement {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    background: white;
}

So far, I have only managed to center the element. However, the white background does not cover the whole screen, it covers 1/4 of the screen and it does allow for the other elements below it to be clicked.

I am new to .css styling so I would be glad if someone could help me achieve the wanted result.

"in the middle of the screen" but "above all other elements" and "covers them". Do you want it 100% wide? Please post some screenshot and the html markup — DaFois, Jul 29 '18 at 14:53
@TemaniAfif, this positions my element in the top left corner. — Smitherson, Jul 29 '18 at 14:54
@Smitherson so you want 2 divs: one as overlay above the other elements and one centered horizontally and vertically on screen. Is it correct? — DaFois, Jul 29 '18 at 14:57
You are looking for Modal actually, if you are using Bootstrap then please go through the Bootstrap Modal document or search for the custom modal. — Zeeshan, Jul 29 '18 at 15:33

score 1 · Answer 1 · answered Jul 29 '18 at 15:45

Try this:

html, body{
  width:100%;
  height:100%;
  margin:auto;
  overflow:hidden;
}
.content{
  width:100%;
  height:100%;
  position:relative;
  margin:auto;
  padding:0px;
  text-align:center;
  background-color:#607d8b;
}
.content h1{
  margin:auto;
  color:#fff;
}
.overlay{
  width:50%;
  height:50%;
  position:fixed;
  top:25%;
  left:25%;
  z-index:100;
  background-color:#becbd2;
  text-align:center;
}

/*or if you want to use a static values do this:*/

/*.overlay{
  width:200px;
  height:200px;
  position:fixed;
  top:25%;
  margin-top:-100px //Half of height;
  left:25%;
  margin-left:-100px //Half of width;
  z-index:100;
  background-color:#becbd2;
  text-align:center;
}*/

<div class="content">
  <h1>Page content</h1>
</div>
<div class="overlay">
  <h1>Overlay content</h1>
</div>

Elysian Storm · Answer 2 · 2018-07-29T15:19:27.433

As @TemaniAfif mentioned, firstly make top: 0; left: 0; followed by setting the width: 100%; height: 100%;. This will set your height and width attribute of the div to its container size (which in this case is the body).

Here is your code:

.hiddenDiv {
    width: 25%;
    height: 25%;
    background: blue;
}

.myElement {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    vertical-align: center;
    z-index: 1;
    background: red;
}

<div class = hiddenDiv>
This div is hidden
</div>

<div class = myElement>
This is a cover
</div>

CSS - Position element above others and in the middle of screen

2 Answers2