为什么div :: before在children元素的顶部显示？

问题描述：

这对我没有意义。不应该::在跨度之前呈现呈现之前？它适用于如果我添加位置：相对于子元素。为什么div :: before在children元素的顶部显示？

这可能有事情做与堆叠内容，但我不知道究竟怎么了。

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

跨度在这种情况下落入＃3，因为它的非定位和::＃6之前，因为它是一个定位的后裔？

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>

您正在使用'位置。 – FluffyKitten

它的确与堆叠上下文有关，例如，如果声明除auto之外的任何'z-index'值，比如'-1'，则将创建一个堆栈上下文，'：pseudo-element '会出现在兄弟'span'元素下面。如果没有声明'z-index'值，绝对定位元素将总是出现在任何“未定位”元素或静态元素（* eg：'position：static' *）之上 - 这通常是任何元件。 – UncaughtTypeError

答

如果一个项目没有position集，那么它在布局中设置相当低。如果您将任何元素定位为absolute，则应该给所有兄弟元素提供一些position。在这个例子中::before和span是兄弟姐妹，并且因为::before具有位置和span不::before更“重要”

我希望所有的答案都是这样向我解释的。没有技术术语就很容易理解。我已经做CSS了一段时间，我觉得这是第一次（我能记得的），我必须显式声明的位置是：相对于之前使用::时。 – chh

答

既然你指定的位置是absolute它使内容是在另一个流动的水平。您可以尝试指定z-index，但即使这并不总是有效。例如，如果您有一些absolute/relative定位的元素，它将在任何数量的z-index上超过static。

答

:pseudo CSS类的工作方式是元素将前后元素中加入。

像这样：

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

我不是很需要实现，但要解释你怀疑什么，你要添加position:relative到您的DIV后产生的电流结果的原因是因为:before是设置为position:absolute。通过这样做它会拉：元素之前出相对于在其中设置div { position:relative; }最近的元件的电流HTML层次和自身的位置。

由于之前被拉出层次的<span>将填补现有的空白空间（由又名重叠：前）。所以它被放置在什么地方你告诉它，即在左上角absolute`：

为什么div :: before在children元素的顶部显示？

相关推荐