CSS overlay over the body of the page

css transparent overlay
css overlay div on image
css overlay image
bootstrap overlay
background overlay css
jquery overlay
overlay over entire body
overlay div over page

I have a DOM that looks like this:

<body>
  <div id="main">
    <iframe id="content"></iframe>
  </div>
  <div id="overlayWrapper">
    <div id="overlay"><--THIS IS EMPTY DIV--></div>
  </div>
</body>

Where inside the main div I have some other stuff too, which are not very relevant here. Now, these divs have the following CSS classes.

#main {
  width: 100%;
  position: static;
  z-index: 2;
  overflow: hidden;
}

#content {
  width: 100%;
  height: 500px;
  z-index: 3000; // This doesn't seem to help.
}

#overlayWrapper {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000; // This needs to be at least 1000 for overlay to cover all elements in the page
  position: fixed; // This seems to cause the problem?!
}

#overlay {
  opacity: 1;
  will-change: opacity;
  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-tap-highlight-color: transparent;
}

Now, this seems to work to some extend, as I see my overlay with the background-color value of rgba(0, 0, 0, 0.5) appearing on the screen.

The problematic part is that I cannot click on the stuff that are inside the iframe.

What I noticed is that this happens because of position: fixed style in the #overlayWrapper.

If I remove it, then I can click on the stuff from iframe but now the overlay is not visible any more.

Is it even possible to somehow keep the overlay but make the stuff on iframe clickable again?

I tried to add z-index: 3000; to iframe (i.e., to #content), but that doesn't seem to work.

Any ideas?


z-index only works on positioned elements. Which means the z-index that you applied to #content, which is the iframe, is not in effect.

#content {
  position: relative;
  z-index: 3000;
}

Here is the working jsfiddle.

PS: I added some links in #main to simulate the content you might have on your page.

CSS Overlay Techniques, html, body{ min-height: 100%; } body{ position: relative; } .overlay{ about the amount of content on the page, and still get an overlay which covers In this case, if you scroll down the page, the overlay will scroll up and you'll� Secondly, it seems that the reason that your overlay-div won't cover the entire viewport is because you have to remove all margins on BODY and HTML. Try adding this at the top of your stylesheet - it resets all margins and paddings on all elements.


It's because the z-index property of the div#main element should be placed before the the z-index of the div#overlayWrapper element.

How To Create an Overlay, Learn how to create an overlay effect with CSS. #overlay { position: fixed; /* Sit on top of the page content */ display: none; /* Hidden by default */ width: 100%� The example below slides in the overlay navigation menu downwards from the top (0 to 100% height). Note: In this example, note that the CSS is slightly different from the one above (default height is now 0, width is 100% and overflow-y is hidden (disable vertical scroll, except for small screens)):


Use position: relative on the <iframe> element because the z-index property gets in action with its relative.

#content {
  width: 100%;
  height: 500px;
  /* This doesn't seem to help */
  z-index: 3000;
  position: relative;
}

How To Create a Full screen Overlay Navigation, Learn how to create a full screen overlay navigation menu. <div class="overlay -content"> When you mouse over the navigation links, change their color */ CSS Overlay. It measures to cover-up something’s surface along with a coating. CSS overlay sets anything over the top area of other things. It creates a web-page more attractive. The design is also quite easy. Designing an overlay consequence specifies that putting two div elements together at any same place. Though, both the elements will


How to Overlay One DIV Over Another DIV using CSS, You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines <body>; <div class="container">; <div class="box" style=" background: red;"></div>; <div class="box stack-top" Previous Page Next Page . Advertisements. In this guide, we’ll go over two separate CSS overlay techniques, and how to implement them on your website today. For more useful CSS overlay techniques, consider taking one of Udemy’s many web design classes, such as this CSS prep course , or this one on the fundamentals of CSS .


Append Site Overlay DIV, Overlays entire site with a black tint, disabling all links and bringing into focus all the most important front-end technologies, from React to CSS, from Vue to D3, I wonder if 'fixed' positioning would be better too if the page I've just discover your snippets repository, and i've become enthusiastic about it! CSS. In your CSS file, you’ll want to set the outer < div > to position: relative, while the inner < div > should be set to position: absolute.The inner < div > should be set to top: 0 and left: 0, with width: 100 % and height: 100 %.


How to Create an Overlay Using CSS, We create <div> element in the markup then position it absolutely with the position property. After it, we give the <div> high z-index value to make it on top of all other elements on the page with the DOCTYPE html> <html> <head> <title> overlay div</title> <style> body { position: About Us � Privacy Policy for W3Docs . How to overlay one div over another div using CSS 12-11-2018 Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear.