CODEWITHSUNDEEP
htmlcssiframe
user9128740
user9128740

Reputation:

CSS overlay over the body of the 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?

Upvotes: 1

Views: 4243

Answers (3)

Aman
Aman

Reputation: 640

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;
}

Upvotes: 1

Ilijanovic
Ilijanovic

Reputation: 14924

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.

Upvotes: 1

Jibin Joseph
Jibin Joseph

Reputation: 1315

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.

Upvotes: 1

Related Questions