【问题标题】:why div with :after gives horizontal scroll to parent element为什么带有 :after 的 div 会水平滚动到父元素
【发布时间】:2013-05-17 04:50:01
【问题描述】:

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

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

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

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

是否有可能使 :after 元素在垂直滚动下方流动并进一步向右?

【问题讨论】:

    标签: css css-position horizontal-scrolling pseudo-element vertical-scrolling


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

    【讨论】:

    • 谢谢您的解释。现在我明白了, .with-after 相对定位是不可能的。我明白你关于欺骗 CSS 的观点。
    【解决方案2】:

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

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

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

    【讨论】:

    • 感谢@Timidfriendly,因为我知道您使用与 Nathan Lee 相同的技术。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多