Comment faire en sorte qu’un élément parent apparaisse au-dessus de l’enfant

J’ai deux éléments CSS nesteds. Je dois faire en sorte que le parent soit au dessus, c’est-à-dire au-dessus de l’axe des z, de l’élément enfant. Juste définir z-index n’est pas suffisant.

Je ne peux pas définir un index z négatif sur l’enfant, qui le placera sous le conteneur de page sur ma page réelle. Est-ce la seule méthode?

.parent { position: relative; width: 750px; height: 7150px; background: red; border: solid 1px #000; z-index: 1; } .child { position: absolute; background-color: blue; z-index: 0; color: white; top: 0; } .wrapper { position: relative; background: green; z-index: 10; } 
 
parent parent
child child child

Définissez un z-index négatif pour l’enfant et supprimez celui défini sur le parent.

 .parent { position: relative; width: 350px; height: 150px; background: red; border: solid 1px #000; } .parent2 { position: relative; width: 350px; height: 40px; background: red; border: solid 1px #000; } .child { position: relative; background-color: blue; height: 200px; } .wrapper { position: relative; background: green; height: 350px; } 
 
parent 1 parent 1
child child child
parent 2 parent 2

Heureusement, une solution existe. Vous devez append un wrapper pour parent et modifier l’index z de ce wrapper pour l’exemple 10 et définir z-index pour enfant sur -1:

 .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; } 
 
parent parent
child child child

Certaines de ces réponses fonctionnent, mais la position: absolute; réglage position: absolute; et z-index: 10; semblait assez fort juste pour obtenir l’effet requirejs. J’ai trouvé tout ce qui était nécessaire, mais malheureusement, je n’ai pas pu le réduire davantage.

HTML:

 
...

CSS:

 .wrapper { position: relative; z-index: 0; } .child { position: relative; z-index: -1; } 

J’ai utilisé cette technique pour obtenir un effet de survol bordé pour les liens d’image. Il y a un peu plus de code ici, mais il utilise le concept ci-dessus pour afficher la bordure au-dessus de l’image.

http://jsfiddle.net/g7nP5/

Puisque vos divs sont position:absolute , ils ne sont pas vraiment nesteds en ce qui concerne la position. Sur votre page jsbin, j’ai changé l’ordre des divs dans le code HTML pour:

 

et la boîte rouge couvrait la boîte bleue, ce que je pense être ce que vous recherchez.

Cracked Fondamentalement, ce qui se passe est que lorsque vous définissez l’index z sur le négatif, il ignore en réalité l’élément parent, qu’il soit ou non positionné, et se place derrière l’élément positionné suivant, qui dans votre cas était votre conteneur principal. Par conséquent, vous devez placer votre élément parent dans un autre, positionner div et votre div enfant sera assis derrière cela.

Travailler avec ça a été une bouée de sauvetage pour moi, car mon élément parent en particulier ne pouvait pas être positionné pour que mon code fonctionne.

J’ai trouvé tout cela incroyablement utile pour obtenir l’effet qui est indiqué ici: en utilisant uniquement CSS, affichez la diffusion sur

Vous devez utiliser position:relative ou position:absolute sur le parent et l’enfant pour utiliser z-index .

style:

 .parent{ overflow:hidden; width:100px; } .child{ width:200px; } 

corps: