J'ai besoin que l'élément :before apparaisse sous l'élément parent, mais cela ne fonctionne pas. Ci-dessous est mon CSS, et vous pouvez trouver un exemple de travail here.Index Z avec parent positionné en absolu
.element {
position: absolute;
z-index: 10;
}
.element:before {
content:"";
position: absolute;
z-index: -1;
}
Au lieu d'utiliser le :before j'ai créé deux de div séparés de. voir la mise à jour jsfiddle Ou l'extrait de code en bas:
.element-1{
position: absolute;
width: 200px;
height: 200px;
background: red;
z-index:10;
}
.element-2{
content:"";
position: absolute;
width: 20px;
height: 20px;
background: green;
z-index:-1;
}<div class="element-1">
</div>
<div class="element-2">
</div>Hope it helps!
Cela fonctionne mais j'ai besoin de l'élément hérité pas voisin. Mais merci de m'avoir aidé! –
Votre tâche est inatteignable (je suppose) si l'objet parent a:
position: absolute;
retirer résout le problème (si la suppression il est permis).
Vous pouvez essayer d'ajouter une balise enfant dans votre conteneur.
Le problème est que :before hérite de l'index z de son parent. z-index fonctionne comme des calques, tout dans votre .element aura un z-index: 10, et ne peut être indexé avec des éléments dans la même «couche». J'espère que je suis assez clair.
.element{
position: relative;
}
.element .child {
position: relative;
top: 0; left: 0;
width: 200px;
height: 200px;
background: red;
z-index:10;
}
.element:before{
content:"";
position: absolute;
width: 20px;
height: 20px;
background: green;
z-index:-1;
}<div class="element">
<div class="child"></div>
</div>
vous pouvez descendre votes pour ce type de question. Donnez votre code complet, Ou faites un violon de travail. – codesayan
http://stackoverflow.com/questions/14483589/z-index-not-working-with-position-absolute –
votre violon n'a aucun sens, pourquoi voudriez-vous dessiner un petit carré sous le grand et le rendre invisible? Vous n'avez pas besoin de 2 éléments div? – NoOorZ24