CSS将元素保持在屏幕上的“固定”位置答案

【问题标题】：CSS to keep element at "fixed" position on screenCSS将元素保持在屏幕上的“固定”位置
【发布时间】：2011-11-26 10:35:52
【问题描述】：

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

它就像 Facebook 上的聊天按钮或某些网站上的反馈按钮，在整个页面中跟随您。

在我的情况下，我想始终在屏幕的绝对右下角保留一个 div。示例 CSS 表示赞赏。

【问题讨论】：

标签： html css

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

你可以这样做：

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

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

【讨论】：

【解决方案3】：

确保您的内容保存在 div 中，例如 divfix。

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

CSS：

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

希望对你有帮助..

【讨论】：

【解决方案4】：

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

添加z-index 是为了掩盖具有您可能不知道的更大属性的任何元素。

【讨论】：

【解决方案5】：

position: sticky;

当您到达滚动位置时，粘性元素会粘在页面顶部（顶部：0）。

参见示例： https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky

【讨论】：

OP 要求内容始终在右下角保持可见。据我所知，sticky 不允许这样做。
> 我希望它一直保持在同一个位置，即使用户滚动浏览文档。

【解决方案6】：

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

position: absolute;
margin-top: -18%

我认为 % 而不是固定像素就是它的作用。干杯！

【讨论】：

【解决方案7】：

HTML

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

CSS

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

【讨论】：

【解决方案8】：

调整：

position:fixed;

有效，但它破坏了某些选项....例如，带有固定位置标记的可滚动菜单将不再随浏览器窗口展开...希望有另一种方法将某些东西固定在顶部/始终可见

【讨论】：

【解决方案9】：

您可能正在寻找position: fixed.

适用于除 IE6 和许多移动设备之外的任何地方。

【讨论】：

@MichaelJCalkins 我有，太棒了！

【解决方案10】：

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

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

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

（请注意，固定位置有问题/不适用于 ios 和 android 浏览器）

【讨论】：

【解决方案11】：

position: fixed;

会实现的。

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

【讨论】：