z-index ne fonctionne pas avec position absolute

Question

J'ai ouvert la console (chrome \firefox ) et a exécuté les lignes suivantes :

$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");

Le #popupContent devrait être au-dessus de tout mais il est affecté par l'opacité du #popupFrame.

Le contenu n'est pas contenu dans #popupFrame ce qui rend cela très bizarre.

L'objectif est de créer une boîte d'alerte semblable à celle de Firefox.

Answer 1

La deuxième division est position: static (par défaut), de sorte que le z-index ne s'y applique pas.

Vous devez positionner (définir la propriété de position à autre chose que static vous voulez probablement relative dans ce cas) tout ce que vous voulez donner à une z-index à.

Answer 2

Vieille question mais cette réponse pourrait aider quelqu'un.

Si vous essayez d'afficher le contenu du conteneur en dehors de ses limites, assurez-vous qu'il ne possède pas de overflow:hidden sinon tout ce qui se trouve à l'extérieur sera coupé.

Answer 3

L'opacité modifie le contexte de votre z-index, tout comme le positionnement statique. Il faut soit ajouter l'opacité à l'élément qui ne l'a pas, soit la supprimer de l'élément qui l'a. Vous devrez également soit rendre les deux éléments statiques, soit spécifier une position relative ou absolue. Voici quelques informations sur les contextes : http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 4

z-index ne s'applique qu'aux éléments qui ont reçu une position explicite. Ajouter position:relative à #popupContent et vous devriez être prêt à partir.

Answer 5

J'ai souvent rencontré ce problème en utilisant position: absolute; J'ai rencontré ce problème en utilisant position: relative dans l'élément enfant. Il n'est pas nécessaire de modifier l'élément position: absolute a relative Il suffit d'ajouter l'élément enfant, comme le montrent les deux exemples ci-dessous :

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})

.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}

<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

C'est ainsi qu'il peut être fixé en utilisant la position relative :

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})

.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;

  // Just add position relative;
  position: relative;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}

<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

Sandbox ici