1
votes

Superposition CSS sur le corps de la page

J'ai un DOM qui ressemble à ceci:

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

À l'intérieur de la div main , j'ai aussi d'autres choses, qui ne sont pas très pertinentes ici. Maintenant, ces divs ont les classes CSS suivantes.

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

Maintenant, cela semble fonctionner dans une certaine mesure, car je vois ma superposition avec le background-color code> valeur de rgba (0, 0, 0, 0.5) apparaissant à l'écran.

La partie problématique est que je ne peux pas cliquer sur les éléments qui se trouvent à l'intérieur du iframe .

Ce que j'ai remarqué, c'est que cela se produit à cause du style position: fixed dans le #overlayWrapper .

Si je le supprime, alors je peux cliquer sur le contenu de iframe mais maintenant la superposition n'est plus visible.

Est-il même possible de conserver la superposition d'une manière ou d'une autre mais rendre le truc sur iframe cliquable à nouveau?

J'ai essayé d'ajouter z-index: 3000; à iframe (ie, à # content ), mais cela ne semble pas fonctionner.

Des idées?

html css iframe

0 commentaires

3 Réponses :

1
votes

C'est parce que la propriété z-index de l'élément div # main doit être placée avant le z-index du élément div # overlayWrapper .

2 commentaires

J'ai essayé de le définir sur z-index: 5000 , pour #main , cela n'a pas aidé.

Que veux-tu accomplir?

1
votes

Utilisez position: relative sur l'élément car la propriété z-index entre en action avec son relatif.

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

1 commentaires

Cette solution fonctionne, je ne comprends pas pourquoi cela a été déclassé.

1
votes

z-index ne fonctionne que sur éléments positionnés a >. Ce qui signifie que le z-index que vous avez appliqué à #content , qui est l'iframe, n'est pas en vigueur.

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

Voici le fonctionnement jsfiddle .

PS: J'ai ajouté des liens dans #main pour simuler le contenu que vous pourriez avoir sur votre page.

0 commentaires