Pourquoi div :: before apparaît en haut de l'élément children?

Cela n'a pas de sens pour moi. Ne devrait pas :: avant d'être rendu avant l'intervalle? Cela fonctionne si j'ajoute une position: relative à l'élément enfant.Pourquoi div :: before apparaît en haut de l'élément children?

Cela pourrait avoir quelque chose à voir avec le contexte d'empilement, mais je ne sais pas exactement comment.

https://www.w3.org/TR/CSS21/visuren.html#layers

La durée dans ce cas tombe dans # 3 parce qu'il est non positionné et avant :: # 6 parce qu'il est un descendant positionné?

div { position:relative; } 
 

 
div:before { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: red; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
/* Adding this works: */ 
 
/* span { position: relative; } */

<div> 
 
    <span>Test</span> 
 
</div>

Source

2017-10-21 chh

Vous utilisez 'position: absolute' de sorte qu'il est placé exactement là où vous le dites, c'est-à-dire dans le coin supérieur gauche. – FluffyKitten

Cela a quelque chose à voir avec le contexte d'empilement, par exemple, si vous déclarez une valeur 'z-index' autre que' auto', comme '-1', vous créerez un contexte d'empilement, et le': pseudo-élément 'apparaîtra sous l'élément' span' de la fratrie. Sans une valeur 'z-index' déclarée, l'élément absolument positionné apparaîtra toujours au-dessus des éléments" non-positionnés "ou des éléments' static' (* ex: 'position: static' *) - qui est généralement le positionnement par défaut de tout élément. – UncaughtTypeError

Si un élément n'a pas position défini, alors il est très bas dans la mise en page. Si vous positionnez un élément comme absolute, vous devez donner position à tous les éléments frères. Dans cet exemple ::before et span sont frères et sœurs, et depuis ::before a position et span n'a pas ::before est plus « important »

Source

2017-10-21 13:09:44 zmuci

Je souhaite que toutes les réponses m'expliquent comme ça. Si simple à comprendre sans jargons techniques. Je fais du CSS depuis un moment et je pense que c'est la première fois (dont je me souvienne) que je dois déclarer explicitement position: relative en utilisant :: before. – chh

Depuis que vous avez spécifié cette position est absolute il est content d'être dans un autre niveau de débit. Vous pouvez essayer de spécifier z-index, mais même cela ne fonctionne pas toujours. Par exemple si vous avez un élément avec absolute/relative le positionnement sera sur static avec n'importe quel nombre de z-index.

Source

2017-10-21 13:07:49 Sergey

Comment fonctionne :pseudo classe CSS est l'élément sera ajouté avant et dans l'élément.

comme ceci:

<div> 
    :before 
    <span>Test</span> 
</div>

Je ne suis pas très ce que vous devez réaliser, mais pour expliquer votre doute, la raison pour laquelle vous produisez le résultat courant après l'ajout position:relative à votre div est parce que :before est réglé avec position:absolute. En faisant ainsi il tirera l'élément: before de la hiérarchie html actuelle et se positionnera par rapport à l'élément le plus proche où vous définissez div { position:relative; }.

Comme l'avant est retiré de la hiérarchie, le <span> va remplir l'espace vide disponible (alias chevauché par: avant).

Source

2017-10-21 13:12:12 Vincent1989

Pourquoi div :: before apparaît en haut de l'élément children?

Répondre

Questions connexes