html - 固定元素如何仅使用 CSS 将内容推送到页面下方？

Question

我以前在这里看到过类似的问题，但答案通常包括 Jquery 等。我是菜鸟，我只想使用 CSS。我有一个网页，上面显示了一段文字:

<P>yes yes yes </P>
<P>yes yes yes </P>
<P class="move">Moving part</P>

我希望最后一部分(类移动)在屏幕较小时移动到顶部。这很好用:

.move {
    color: blue;
}
@media screen and (max-width: 600px) {
    .move {
        position: fixed;
        top: 0px;
    }
}

除了“移动部分”显示在文本上!我怎样才能把文字往下推。我试过高度等。

Answer 1

有position: sticky , 但它仅在 FireFox 和 Safari 中受支持。

不幸的是，没有 JavaScript，其他浏览器无法模仿这一点。

要做到这一点，需要在您向下滚动页面时计算和修改顶部。我自己一直在寻找仅 CSS 的解决方案，但它似乎不存在，我的尝试也没有奏效。

看看 stickyMojo jQuery 插件或 Bootstrap affix .