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

Question

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

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

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

Answer 1

您可能正在寻找position: fixed.

除IE6和许多移动设备外，无处不在。

Answer 2

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

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

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

（请注意，修复的位置是错误/在ios和Android浏览器上不起作用）

Answer 3

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

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

Css：

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

希望，它会帮助你......

Answer 4

position: sticky;

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

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

Answer 5

调整：

position:fixed; 

工作，但它打破了某些选项....例如，标记为固定位置的可滚动菜单将不再随浏览器窗口扩展...希望有另一种方式把东西钉在上面/始终可见

Answer 6

position: fixed;

会让这种情况发生。

它处理类似于position:absolute;，除了当用户向下滚动内容时它将随窗口滚动。

Answer 7

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

position: absolute;
margin-top: -18%

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

Answer 8

你可以这样做：

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

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

Answer 9

试试这个：

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

Answer 10

HTML

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

CSS

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

Answer 11

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

}

添加了z-index，以遮盖任何您可能不知道的具有更大属性的元素

Answer 12

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