Html CSS 将元素保持在屏幕上的“固定”位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7576342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS to keep element at "fixed" position on screen
提问by Mike
I'm looking for a trick to create a "fixed" HTML object on the browser screen using CSS. I want it to stay in the same position all the time, even when the user scrolls through the document. I'm not sure what the proper term for this is.
我正在寻找一种使用 CSS 在浏览器屏幕上创建“固定”HTML 对象的技巧。我希望它始终保持在同一位置，即使用户滚动浏览文档也是如此。我不确定这的正确术语是什么。
It would be like the chat button on Facebook or the Feedback button that is on some websites that follows you throughout the page.
它就像 Facebook 上的聊天按钮或某些网站上的反馈按钮，在整个页面上跟随您。
In my situation, I want to keep a div at the absolute bottom-right corner of the screen at all times. Sample CSS appreciated.
在我的情况下，我想始终在屏幕的绝对右下角保留一个 div。示例 CSS 表示赞赏。
回答by Pekka
You may be looking for position: fixed.
您可能正在寻找position: fixed.
Works everywhere except IE6 and many mobile devices.
适用于除 IE6 和许多移动设备之外的任何地方。
回答by mreq
The easiest way is to use position: fixed:
最简单的方法是使用position: fixed：
.element {
position: fixed;
bottom: 0;
right: 0;
}
http://www.w3.org/TR/CSS21/visuren.html#choose-position
http://www.w3.org/TR/CSS21/visuren.html#choose-position
(note that position fixed is buggy / doesn't work on ios and android browsers)
（请注意，固定位置有问题/不适用于 ios 和 android 浏览器）
回答by Srinivas08
Make sure your content is kept in a div, say divfix.
确保您的内容保存在divdivfix 中。
<div id="divfix">Your Code goes here</div>
CSS :
CSS :
#divfix {
bottom: 0;
right: 0;
position: fixed;
z-index: 3000;
}
Hope ,It will help you..
希望，它会帮助你..
回答by Hermes Nguyen
position: sticky;
The sticky element sticks on top of the page (top: 0) when you reach its scroll position.
当您到达其滚动位置时，粘性元素会粘在页面顶部（顶部：0）。
See example: https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
参见示例：https: //www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
回答by Robert F Wainblat III
The tweak:
调整：
position:fixed;
works, butit breaks certain options....for example a scrollable menu that is tagged with a fixed position will not expand with the browser window anymore...wish there was another way to pin something on top/always visible
有效，但它破坏了某些选项......例如，带有固定位置标记的可滚动菜单将不再随浏览器窗口展开......希望有另一种方法将某些东西固定在顶部/始终可见
回答by sg3s
position: fixed;
position: fixed;
Will make this happen.
会让这件事发生。
It handles like position:absolute;with the exception that it will scroll with the window as the user scrolls down the content.
position:absolute;除了当用户向下滚动内容时它会随着窗口滚动之外，它的处理方式类似。
回答by dgsinclair
In order to keep floating text in the same location over an image when changing browser zoom, I used this CSS:
为了在更改浏览器缩放时将浮动文本保持在图像上的同一位置，我使用了以下 CSS：
position: absolute;
margin-top: -18%
I think the % instead of fixed pixels is what does it. Cheers!
我认为 % 而不是固定像素是它的作用。干杯!
回答by Chambah Russell
#fixedbutton {
position: fixed;
bottom: 0px;
right: 0px;
z-index: 1000;
}
The z-indexis added to overshadow any element with a greater property you might not know about.
将z-index被添加到掩盖你可能不知道的更大的财产的任何元素。
回答by Rana Aalamgeer
HTML
HTML
<div id="fixedbtn"><button type="button" value="Delete"></button></div>
CSS
CSS
#fixedbtn{
position: fixed;
margin: 0px 10px 0px 10px;
width: 10%;
}
