HTML overlay not covering flexbox layout

user_14139968 0
Viewed 187

I have an HTML/CSS pure layout and I'm using flexbox. I am developing a simple hamburger overlay menu sort of thing, but the overlay isn't fully covering the entire site -- there is no higher z-index present.

If I change the opacity to 0, the entire page goes white.

Desired Output:

Div that covers the entire page

Current Output (See Below):

HTML

<body data-theme="light" class="overlay">
...
</body>

CSS

.overlay {
  opacity: 1;
  background: #000;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed;
}

Output

enter image description here

css html
2 Answers

You can't make the HTML body an overlay because it is the main container for the whole page, so it contains the elements you are trying to overlay.

Instead you can create a separate div for the overlay. This shouldn't have any content (unless you want content in your overlay of course). Then you can add your existing overlay class to it:

.overlay {
  opacity: 0.5;
  background: #000;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed;
}
h1, p { color: red;}
<body data-theme="light">
    <div class="overlay"></div>
    <h1>Hello</h1>
</body>

user_5148780

First you may add

.FlexContainer{position: relative;}

Next a few changes for the Overlay:

.FlexContainer .Overlay {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    border: none;
    width: 100%;
    height: 100%;
    background-color: rgba(013, 130, 230, 0.5);
    cursor: not-allowed;
}
user_119549170
Related