css - 为什么 div 与 :after gives horizontal scroll to parent element

Question

我有这种情况http://jsfiddle.net/m_aleksandrova/9THdb/

div.with-after 有一个 :after 伪元素(向右流动)。它的父级 (div.container) 需要垂直滚动。

<div class="container">
  <div class="with-after"></div>
</div>

问题是为什么 :after 导致水平滚动？我想如果 :after 是绝对定位的，它就不再在流中了。

是否可以使 :after 元素在垂直滚动下方流动并进一步向右移动？

Answer 1

要实现变体 3，您必须在之后对您的类进行以下更改。

这是 Fiddle .

CSS 的变化:

.with-after {
    border: 1px solid green;
    height: 50px;
    padding: 0 93px;
    position: absolute;
    right: 480px;
    z-index: -1;
}

你必须让主类成为绝对位置。这将移除它的流，并且通过 z-indexing 它将位于垂直滚动条的下方。希望这会有所帮助。

逻辑:

正如我之前所说，您不能通过为主类创建 position:relative 和为同一类的伪元素创建 position:absolute 来欺骗 CSS。因此，为了实现使 div 在垂直滚动下方的效果，您必须为必须位于父元素下方的类定义 position:absolute。因此，定义具有不同位置的同一类的 psudo 对浏览器来说没有好处，无法识别您想要的东西，并且通过结合使用伪元素类和实际元素类会表现得很奇怪，因此使其对浏览器知道你想要什么，将主要的 with-after 类声明为 position:absolute 并且让浏览器知道它必须位于具有负 z-index 的父元素之下。希望这对现在有所帮助。