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

Question

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

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

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

- Mike

Answer 1

你可能正在寻找 position: fixed。

在 IE6 和许多移动设备中无法正常工作。

- Pekka

---

@MichaelJCalkins 我试过了，真是太棒了！ - Pekka

Answer 2

最简单的方法是使用position: fixed：

.element {
  position: fixed;
  bottom: 0;
  right: 0;
}

http://www.w3.org/TR/CSS21/visuren.html#choose-position

(请注意，固定定位在iOS和Android浏览器上存在缺陷/无法正常工作)

- mreq

Answer 3

请确保您的内容放在一个名为divfix的

标签内。

<div id="divfix">Your Code goes here</div>

CSS：

#divfix {
       bottom: 0;
       right: 0;
       position: fixed;
       z-index: 3000;
}

希望这能对你有所帮助。

- Srinivas08

Answer 4

position: sticky;

这个“sticky”元素会在滚动到它的位置时固定在页面顶部（top: 0）。

可参考以下示例： https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky

- Hermes Nguyen

---

OP要求内容始终保持在右下角可见。据我所知，粘性布局无法实现这一点。 - Crono

我希望它始终保持在同一位置，即使用户滚动文档。 - Matthis Kohli

Answer 5

尝试这个：

试试这个：

p.pos_fixed {
    position:fixed;
    top:30px;
    right:5px;
}

- Altaf Patel

Answer 6

优化：

position:fixed; 

它能正常工作，但会破坏某些选项....例如，一个带有固定位置标记的可滚动菜单将不再随着浏览器窗口扩展...希望有另一种方法来将某物固定在顶部/始终可见。

- Robert F Wainblat III

Answer 7

position: fixed;

这会发生什么。

它的处理方式类似于position:absolute;，但与用户向下滚动内容时，它将随窗口一起滚动。

- sg3s

Answer 8

你可以这样做：

#mydiv {
    position: fixed; 
    height: 30px; 
    top: 0; 
    left: 0; 
    width: 100%; 
}

这将创建一个 div，它将固定在屏幕顶部。- fixed

- realshadow

Answer 9

#fixedbutton {
    position: fixed;
    bottom: 0px;
    right: 0px; 
    z-index: 1000;
}

z-index 属性被添加用于覆盖可能存在的具有更高属性的元素。

- Chambah Russell

Answer 10

为了在更改浏览器缩放时使浮动文本保持在图像上相同的位置，我使用了以下CSS：

position: absolute;
margin-top: -18%

我认为使用百分比而不是固定像素是关键。谢谢！

- dgsinclair