J'essaie de donner un style à un élément avec la méthode :after sélecteur CSS de pseudo-élément
#element {
position: relative;
z-index: 1;
}
#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;
}Il semble que le ::after ne peut être inférieur à l'élément lui-même.
Existe-t-il un moyen d'avoir le pseudo-élément plus bas que l'élément lui-même ?
Pseudo-éléments sont traités comme des descendants de leur élément associé. Pour positionner un pseudo-élément sous son parent, vous devez créer un élément nouveau contexte d'empilement pour modifier l'ordre d'empilage par défaut.
Le positionnement du pseudo-élément (absolu) et l'attribution d'une valeur z-index autre que "auto" créent le nouveau contexte d'empilement.
#element {
position: relative; /* optional */
width: 100px;
height: 100px;
background-color: blue;
}
#element::after {
content: "";
width: 150px;
height: 150px;
background-color: red;
/* create a new stacking context */
position: absolute;
z-index: -1; /* to be below the parent element */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Position a pseudo-element below its parent</title>
</head>
<body>
<div id="element">
</div>
</body>
</html>
Toutefois, si vous avez un div parent normal avec un arrière-plan, l'élément inférieur sera masqué. Dans ce cas, donnez au parent un positionnement relatif et un z-index de 1. Voir : jsbin.com/juputice/3/edit
Un seul commentaire sur ce code : si le div parent (parent du propriétaire du pseudo-élément) a un arrière-plan (par exemple la balise body), il recouvrira l'arrière-plan du pseudo-élément. Pour résoudre ce problème, la division parent doit être positionnée de manière relative et la valeur de l'index z doit être inférieure à celle du pseudo-élément.
Il convient également de noter un comportement étrange : si vous utilisez la transformation sur l'élément parent, l'arrière-plan de l'élément parent sera toujours sous le pseudo-élément, tandis que le contenu sera au-dessus.
Je sais que c'est un vieux fil de discussion, mais je ressens le besoin de poster la réponse appropriée. La réponse réelle à cette question est que vous devez créer un nouveau contexte d'empilement sur le parent de l'élément avec le pseudo-élément (et vous devez réellement lui donner un z-index, pas seulement une position).
Comme ça :
#parent {
position: relative;
z-index: 1;
}
#pseudo-parent {
position: absolute;
/* no z-index allowed */
}
#pseudo-parent:after {
position: absolute;
top:0;
z-index: -1;
}Cela n'a rien à voir avec l'utilisation des pseudo-éléments :before ou :after.
#parent { position: relative; z-index: 1; }
#pseudo-parent { position: absolute; } /* no z-index required */
#pseudo-parent:after { position: absolute; z-index: -1; }
/* Example styling to illustrate */
#pseudo-parent { background: #d1d1d1; }
#pseudo-parent:after { margin-left: -3px; content: "M" }
<div id="parent">
<div id="pseudo-parent">
</div>
</div>
Je ne suis pas sûr de ce que vous voulez dire par #parent et #pseudo-parent Pourriez-vous me montrer un jsFiddle ? ou un exemple, merci quand même.
@adardesign - jsfiddle est en lecture seule pour le moment, le HTML est disponible à pastebin - pastebin.com/cjYT2aWW
C'est une réponse plus complète, Adam. Merci ! Je constate (sur Chrome) que le z-index de #pseudo-parent n'est non seulement pas nécessaire, mais qu'il est également délétère (alors que le z-index de #parent n'a aucun effet), et que la div :after n'apparaît sous le parent que lorsque son z-index est négatif.
Il y a deux problèmes en jeu ici :
La spécification CSS 2.1 stipule que "l'élément :before et :after Les éléments pseudo-éléments interagissent avec d'autres boîtes, telles que les boîtes d'exécution, comme s'il s'agissait d'éléments réels insérés juste à l'intérieur de leur élément associé." Compte tenu de la façon dont les z-index sont mis en œuvre dans la plupart des navigateurs, il est assez difficile (lire, je ne connais pas de moyen) de déplacer du contenu plus bas que l'indice z de leur élément parent dans le DOM qui fonctionne dans tous les navigateurs.
Le premier point ci-dessus ne signifie pas nécessairement que c'est impossible, mais le deuxième obstacle est en fait pire : en fin de compte, c'est une question de prise en charge par le navigateur. Firefox ne prenait pas du tout en charge le positionnement du contenu généré avant FF3.6. Qui sait pour les navigateurs comme IE. Ainsi, même si vous parvenez à trouver une astuce pour que cela fonctionne dans un navigateur, il est très probable que cela ne fonctionne que dans ce navigateur.
La seule chose à laquelle je pense qui puisse fonctionner sur tous les navigateurs est d'utiliser le javascript pour insérer l'élément plutôt que le CSS. Je sais que ce n'est pas une bonne solution, mais le :before et :after Les pseudo-sélecteurs n'ont pas l'air de pouvoir faire l'affaire ici.
En ce qui concerne la spécification ( http://www.w3.org/TR/CSS2/zindex.html ), puisque a.someSelector est positionné, il crée un nouveau contexte d'empilement dont ses enfants ne peuvent pas sortir. Laissez a.someSelector non positionné et ensuite enfant a.someSelector:after peut être positionné dans le même contexte que a.someSelector .
Je sais que cette question est ancienne et a une réponse acceptée, mais j'ai trouvé une meilleure solution au problème. Je la publie ici pour ne pas créer une question en double et pour que la solution soit toujours disponible pour les autres.
Changez l'ordre des éléments. Utilisez le bouton :before pour le contenu qui doit se trouver en dessous, et ajuster les marges pour compenser. Le nettoyage des marges peut être désordonné, mais le résultat escompté est le même. z-index seront préservés.
J'ai testé cela avec IE8 et FF3.6 avec succès.
Utilisez cette méthode avec une extrême prudence si le contenu de votre :before contient du texte significatif. Le texte placé dans la zone :before n'est pas lu par les moteurs de recherche, ce qui affecte le référencement. Les lecteurs d'écran ne lisent pas non plus le texte :before ou :after, ce qui rend votre page moins accessible.
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.
2 votes
Relié : (même raison et solution) - Comment faire en sorte qu'un élément parent apparaisse au-dessus de l'enfant ? et Comment faire en sorte que l'élément enfant ait un z-index plus élevé que le parent ?