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;
    }
}

除了＆＃34;移动部分＆＃34;显示在文字上！如何将文本向下推。我已尝试过身高等等。

Answer 1

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

不幸的是，如果没有JavaScript，没有办法模仿其他浏览器。

要执行此操作，需要在向下滚动页面时计算和修改顶部。我自己找了一个只有CSS的解决方案，它似乎不存在，我的尝试也没有用。

查看stickyMojo jQuery插件或Bootstrap affix。

Answer 2

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

<form method="post" enctype="multipart/form-data" id="upload" action="<%=(String)request.getAttribute("base_url")%>files/upload/">

CSS

declare @t table ([id] int, [fraction]  nvarchar(max));
insert into @t([id], [fraction]) values(0, '<sup>3</sup>&frasl;<sub>8</sub>');

; with n as (
select [id], [numerator] = substring([fraction], CHARINDEX('<sup>', [fraction], 0) + len('<sup>'), CHARINDEX('</sup>', [fraction], 0) - CHARINDEX('<sup>', [fraction], 0) - len('<sup>'))
    , [denominator] = substring([fraction], CHARINDEX('<sub>', [fraction], 0) + len('<sub>'), CHARINDEX('</sub>', [fraction], 0) - CHARINDEX('<sub>', [fraction], 0) - len('<sub>'))
From @t
)
Select [id], [html] = '<div class="fraction"><div class="numerator">'+n.[numerator]+'</div><div class="denominator">'+n.[denominator]+'</div>div>'
From n;

或制作两个移动元素，一个隐藏，只有在屏幕变小时才会显示，另一个隐藏起来。

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

2 个答案: