CSS使元素在屏幕上保持“固定”位置

Question

73

我正在寻找一种使用CSS创建“固定”HTML对象在浏览器屏幕上的技巧。我想让它始终保持在同一位置，即使用户滚动文档时也是如此。我不确定这个术语的正式名称。

就像Facebook上的聊天按钮或某些网站上的反馈按钮一样，它会随着页面滚动而跟随您。

在我的情况下，我想始终将一个div保持在屏幕的右下角位置。欢迎提供示例CSS。

- Mike

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rana Aalamgeer · Answer 1

HTML

<div id="fixedbtn"><button type="button" value="Delete"></button></div>

CSS

#fixedbtn{
 position: fixed;
 margin: 0px 10px 0px 10px;
 width: 10%;
}

- Ayden Cheong · Answer 2

你可以尝试这段代码：

<div style="top: 0; position: sticky;">your code</div>

或者您可以像这样添加类/ID：

HTML：

<div class="FixedPosition">your code</div>

CSS：

.FixedPosition{
 position: sticky;
 top: 0;
}

如果您不想让它在屏幕顶部，请更改“top”，但请勿删除“top”，否则它将无法正常工作。

希望这可以帮到您：）