J'ai 2 éléments css imbriqués. Je dois obtenir que le parent soit au dessus, c'est-à-dire en haut de l'axe des z, de l'élément enfant. Il ne suffit pas de définir z-index. Comment puis-je faire cela? Merci.
Éditer: Je ne peux pas définir d’index z négatif sur l’enfant, cela le placera sous le conteneur de page de ma page actuelle. Est-ce la seule méthode?
Edit2: Exemple mis à jour pour définir les deux sur position: absolute;
Heureusement, la solution existe :) Vous devez ajouter un wrapper pour le parent et modifier l'index z de ce wrapper pour l'exemple 10, et définir l'index z pour l'enfant sur -1 ... et le tour est joué;)
<head>
<style type="text/css">
.parent {
position: relative;
width: 750px;
height: 7150px;
background: red;
border: solid 1px #000;
z-index: initial;
}
.child {
position: relative;
background-color: blue;
z-index: -1;
color: white;
}
.wrapper
{
position: relative;
background: green;
z-index: 10;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="parent">parent parent
<div class="child">child child child</div>
</div>
</div>
</body>
Certaines de ces réponses pour faire le travail, mais la définition d' position: absolute; et z-index: 10; a semblé assez forte pour atteindre le même effet. J'ai trouvé le suivant était tout ce qui était nécessaire, mais malheureusement, je n'ai pas été en mesure de le réduire davantage.
HTML:
<div class="wrapper">
<div class="parent">
<div class="child">
...
</div>
</div>
</div>
CSS:
.wrapper {
position: relative;
z-index: 0;
}
.child {
position: relative;
z-index: -1;
}
J'ai utilisé cette technique pour réaliser une bordée hover effet pour le lien d'une image. Il y a un peu plus de code ici, mais il utilise le concept ci-dessus pour afficher la frontière sur le haut de l'image.
Puisque vos divs sont position:absolute , ils ne sont pas vraiment imbriqués en ce qui concerne la position. Sur votre page jsbin, j'ai changé l'ordre des divs dans le code HTML en:
<div class="child"><div class="parent"></div></div>
et la boîte rouge couvrait la boîte bleue, ce qui, je pense, est ce que vous recherchez.
Craqué. Fondamentalement, ce qui se passe est que lorsque vous définissez le z-index pour le négatif, il ignore l'élément parent, s'il est placé ou pas, et s'assoit derrière le prochain positionné élément, qui dans votre cas a été votre conteneur principal. Par conséquent, vous devez mettre votre parent de l'élément en un autre, placé div, et votre enfant div va s'asseoir derrière.
De travail qui a été un épargnant de vie pour moi, comme mon parent de l'élément spécifiquement ne pouvait pas être placé, pour que mon code fonctionne.
J'ai trouvé tout cela très utile pour obtenir l'effet qui est indiqué ici: Show div sur le vol stationnaire avec uniquement du CSS
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
