0

So I was trying to create a div that would be alpha:0 on top of the page and have an animation to "darken" the rest of the website with a popup on top.

While this in theory sounded easy to do, I kept fiddling with positions absolute/relative/fixed to try and achieve this, but no success.

What I have right now is an element inside an element, my problem I can't bring it to the back of the webpage, even with z-index.

What would be your simplest solution to have a transparent div over any other element? (except the pop-up)

My code at the moment:

<body>
    <div position="fixed" style="background-color: rgba(0, 0, 0, 1); border: 1px solid green; height: 100vh; width: 100vw; top:0; z-index: 10">
        <div position="absolute" class="header" id="header" style="border:1px solid green; background-color: white; height:30px; width:250px; top:0; z-index: -1"></div>
    </div>
</body>
João Drake
  • 3
  • 3

2 Answers2

0

Write the overlay below the other div and put them both in position: absolute;. If you want the anything above the overlay use the same logic. Add another div below the overlay. You can also add on in the overlay.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  min-height: 100%;
}
<body>

  <!-- your content -->
  <div class="header" id="header" style="position: absolute;border:1px solid green; background-color: white; height:30px; width:250px;">
  </div>

  <!-- the overlay -->
  <div style="position: absolute; background-color: rgba(0, 0, 0, 0.8); border: 1px solid green; height: 100%; width: 100%;">
  </div>

</body>

Also note that I move the position: absolute; instide the style. By the way, you should move it again to a css file :)

aloisdg
  • 22,270
  • 6
  • 85
  • 105
  • I had tried one below the other before, but the conflict appeared to be in setting the position of the element in the "style" tag instead of the HTML property. When I had
    it would just render it out of the overlay. Thanks!
     – João Drake Nov 14 '19 at 13:34
  • @JoãoDrake I am glad you figured it out. – aloisdg Nov 14 '19 at 15:31
0

Here you have a code wich works :

<body>
    <div style="position: fixed; display: block; z-index: 2;  height: 100vh; width: 100vw; background-color: transparent; top: 0px; left: 0px;"></div>
    <p id="objectInBackground">The text you want to hide</p>
</body>
niaou suzanne
  • 43
  • 1
  • 9