CSS :before/:after 选择器突然与父级分开定位 div

Question

我换了一台新电脑，突然 CSS :after 和 :before 选择器不再工作了。

奇怪的是，我之前在另一台电脑上添加的:before/:after选择器，在我的新电脑上显示完全正常。但是我现在添加的任何新代码都不会显示，即使我将旧代码复制并粘贴到新的 div.

比如这个：

html

<div id="wtf"></div>

css

#wtf {
    width: 10px;
    height: 20px;
    background: red;
}
#wtf:after {
    content: "";
    position: absolute;
    left: 100px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: blue;
}

将此代码直接复制并粘贴到 fiddle: ( http://jsfiddle.net/rLnrtu0x/ ) 时有效，但我的本地浏览器上只显示红色框。无论我做什么，蓝框都不会显示。所有其他 CSS 行为正常。

有谁知道我可能做错了什么？

在 Ubuntu 14.04 上的 Mozilla 35.0.1 和 Chrome 42.0.2311.152（64 位）上测试。我不能在我的旧电脑上重新测试它，因为它坏了，但我以前从未遇到过 :before/:after 选择器的问题。

更新

我刚刚和检查员一起找到了选择器。它们实际上正常显示，但它们的定位是相对于 html，而不是它们的父级 div。同样，使用我在计算机更改之前添加的代码，:before/:after 选择器相对于父 div 定位。但是新代码，即使它是复制粘贴的，也会相对于 html 定位选择器。为什么会这样？

Answer 1

原来跟换电脑无关。 :before/:after 选择器实际上正在显示，但它们是相对于 html 而不是父 div 定位的，因为父 div 是绝对定位的。

Answer 2

父容器需要`position`

绝对定位元素被定位"at a specified position relative to its closest positioned ancestor or to the containing block."(src:MDN)

因此，您的 :after 伪元素未包含在其父元素中，因为父元素不是 "positioned" 或其位置设置为 static.

唯一的解释是，您之前的设置中一定有某些东西将 position 应用到 #wtf，这使得它的子项可以绝对定位在其中。

您可以 "fix" 通过将位置应用于 #wtf 来解决问题，如下所示：

#wtf {
    width: 10px;
    height: 20px;
    background: red;
    position: relative;
}
#wtf:after {
    content: "";
    position: absolute;
    left: 100px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: blue;
}

<div id="wtf"></div>

CSS :before/:after 选择器突然与父级分开定位 div

CSS :before/:after selectors are suddenly being positioned separately of parent div

html

css

pseudo-element

更新

父容器需要`position`

CSS :before/:after 选择器突然与父级分开定位 div

CSS :before/:after selectors are suddenly being positioned separately of parent div

html

css

pseudo-element

更新

父容器需要position

父容器需要`position`