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

【问题标题】：How can fixed element push content down the page using CSS only?固定元素如何仅使用 CSS 将内容推送到页面下方？
【发布时间】：2015-08-03 16:55:12
【问题描述】：

我以前在这里看到过类似的问题，但答案通常包括 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;
    }
}

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

【问题讨论】：

当您使用position:fixed 时，该元素会脱离正常的文档流，因此不会占用额外的空间。您将不得不使用占位符元素，或克隆元素以使其原始父元素保持相对（但在窄屏幕中呈现透明），或为直接兄弟（使用+）提供与固定高度匹配的上边距元素。有一个提议的 position: sticky 完全符合您的要求，但 it is still not widely supported。
在您的媒体查询中，您可以向正文添加一些填充或向另一个元素添加一些边距。您的问题不足以真正正确回答。

标签： html css responsive-design

【解决方案1】：

有position: sticky，但只支持 FireFox 和 Safari。

很遗憾，没有 JavaScript 的其他浏览器无法模仿这一点。

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

查看stickyMojo jQuery 插件或Bootstrap affix。

【讨论】：

对该功能的支持已经增加，现在可以在除一个之外的所有主要浏览器中使用。猜猜是哪个。

【解决方案2】：

将代码包装到一个 div 中，并在屏幕变小时给它一个 margin-top。这是我能想象到的唯一可以在所有浏览器中只使用 CSS 的东西。你的“移动”元素应该有一个固定的高度。例如：

<div class="move-mobile">
  <P>yes yes yes </P>
  <P>yes yes yes </P>
</div>
<P class="move">Moving part</P>

CSS

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

    .move-mobile {
        margin-top: 50px;
    }
}

或者做两个移动元素，一个是隐藏的，只有在屏幕变小的时候才可见，另一个是隐藏的。

【讨论】：