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

Question

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

这就像在Facebook或聊天按钮反馈按钮是一些跟随你整个页面的网站。

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

Answer 1

你可能会寻找position: fixed.

作品无处不在，除了IE6和许多移动设备。

Answer 2

position: fixed;

会做到这一点。

它处理像position:absolute;不同之处在于，将与窗口用户向下滚动内容滚动。

Answer 3

你可以这样说：

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

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

Answer 4

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

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

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

（注意固定的位置是越野车/ iOS和Android上的浏览器不工作）

Answer 5

的好办法：

position:fixed; 

作品，但是它打破了某些选项....例如，用固定位置标记的可滚动菜单不会随着浏览器窗口扩展...希望有另一种方法来顶住/顶部的东西

Answer 6

试试这个：

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

Answer 7

确保你的内容保存在一个div中，说divfix。

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

的CSS：

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

希望，这将帮助你..

Answer 8

HTML

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

CSS

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

Answer 9

为了保持漂浮在同一位置的文本在图像改变浏览器缩放的时候，我用这个CSS：

position: absolute; 
margin-top: -18% 

我瘦k代表固定像素的百分比是什么。干杯!

Answer 10

position: sticky; 

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

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