0

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

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

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

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

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

我的问题的插图

4

2 回答 2

1

要实现变体 3，您必须对您的课程进行以下更改。

这是小提琴。

CSS 的变化：

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

您必须使主要课程，即在您的情况下获胜，才能拥有绝对位置。这将删除它的流，并且通过 z-indexing 它将位于垂直滚动的下方。希望这可以帮助。

逻辑：

就像我之前说的，你不能通过为主类设置一个 position:relative 和为同一个类的伪元素设置 postion:absolute 来欺骗 CSS。因此，为了达到使 div 位于垂直滚动下方的效果，您必须为必须位于父元素下方的类定义 position:absolute。因此，定义具有不同位置的同一类的 psudo 将不利于浏览器识别您想要的内容，并且会通过结合伪元素类和实际元素类来表现怪异，因此使其对浏览器知道你想要什么，将主要的 with-after 类声明为 position:absolute 并让浏览器简单地知道它必须在具有负 z-index 的父元素下方。希望这对现在有所帮助。

于 2013-05-17T06:18:52.433 回答
1

像这样的东西对你有用吗？http://jsfiddle.net/David_Knowles/3arca/

.my-position-base {position: relative;}

添加这个包装器为实现您正在寻找的东西所需的疯狂绝对定位提供了一个上下文。

于 2013-05-17T06:56:27.353 回答