固定元素如何仅使用CSS将内容推入页面? [英] How can fixed element push content down the page using CSS only?

问题描述

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

I've seen similar question asked here before but answers usually include Jquery etc. I'm rookie and I want to use CSS only. I have a web page and there is a text displayed on it:

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

我希望最后一个部分(类移动)在屏幕较小时在顶部移动.效果很好:

I want the last part (class move) to move on the top when screen is small. This works great:

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

除了"Moving part"(移动部分)以外，还会在文本上方显示！我如何下推文本.我已经尝试过身高，等等.

Except "Moving part" is displayed over text! How can I push the text down. I've tried height, etc.

推荐答案

有 position:sticky ，但仅在FireFox和Safari中受支持.

There is position: sticky, but it's only supported in FireFox and Safari.

不幸的是，对于没有JavaScript的其他浏览器，无法模仿它.

Unfortunately there is no way to mimic this for other browsers without JavaScript.

要执行此操作，需要在向下滚动页面时计算和修改顶部.我本人一直在寻找仅CSS的解决方案，但它似乎不存在，我的尝试也没有奏效.

To do this requires the top to be calculated and modified as you scroll down the page. I've looked for a CSS only solution myself and it doesn't seem to exist, nor did my attempts work.

看看 stickyMojo jQuery插件或

Have a look at the stickyMojo jQuery plugin or Bootstrap affix.

这篇关于固定元素如何仅使用CSS将内容推入页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！