z-index ne fonctionne pas avec position absolue
J'ai ouvert la console (chrome firefox)et 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 avant tout mais il est affecté par l'opacité #popupFrame.
Le contenu n'est pas contenu dans # popupFrame ce qui rend cela très bizarre.
Le but est de créer firefox comme boîte d'alerte
J'apprécierai toute sorte d'aide.
Merci d'avance.
4 réponses
La deuxième div est position: static (la valeur par défaut) de sorte que l'index z ne s'applique pas à elle.
Vous devez positionner (définissez la propriété position sur autre chose que static, vous voulez probablement relative dans ce cas) tout ce que vous voulez donner un z-index.
L'opacité change le contexte de votre index z, tout comme le positionnement statique. Ajoutez de l'opacité à l'élément qui ne l'a pas ou supprimez-le de l'élément qui l'a. Vous devrez également rendre les deux éléments statiques positionnés ou 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/
z-index s'applique uniquement aux éléments qui ont reçu une position explicite. Ajoutez position:relative à # popupContent et vous devriez être prêt à partir.
Ancienne question mais cette réponse pourrait aider quelqu'un.
Si vous essayez d'afficher le contenu du conteneur en dehors des limites du conteneur, assurez-vous qu'il n'a pas overflow:hidden, sinon tout ce qui est en dehors de celui-ci sera coupé.