Html 将 div 固定到某个位置（在调整窗口大小时保持固定）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10317725/
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
Fixing a div to a certain position (stays fixed with window resize)
提问by Sean Zulu
Please refer to my site Vault X
请参考我的网站Vault X
I have been trying to make the light switch next to the vault a clickable function.
我一直在尝试使保险库旁边的电灯开关成为可点击的功能。
However, I cannot get my div to stay fixed on this position (adjusting the window size causes it to move about).
但是，我无法让我的 div 固定在这个位置（调整窗口大小会导致它移动）。
What is the best way to achieve this?
实现这一目标的最佳方法是什么？
回答by Thomas Jones
Doing position:absolute(or more appropriately here position:fixed) specifies a elements position outside the normal flow of the document relative to the first parent that has a position other than static (in this case (and always with position:fixed) the browser window).
做position:absolute（或更恰当地在这里position:fixed）指定一个元素位置在文档的正常流之外，相对于第一个父级的位置不是静态的（在这种情况下（并且总是与position:fixed）浏览器窗口）。
As such, since youve specified a top and a right position, these values are fixed. When you move the right border in, the distance from the browser viewport must stay the same, so the element moves.
因此，由于您指定了顶部和右侧位置，因此这些值是固定的。当您将右边框移入时，与浏览器视口的距离必须保持不变，因此元素会移动。
You can try positioning from the left, but that will only guard against resizing from the right (if I drag the left corners in, the element will move)
您可以尝试从左侧定位，但这只会防止从右侧调整大小（如果我将左角拖入，元素将移动）
Alternatively, you should position this element statically within the document, within your #wrapperdiv so that resizing the window has no effect on document flow.
或者，您应该将此元素静态定位在文档中的#wrapperdiv 中，以便调整窗口大小不会影响文档流。
回答by rgthree
Because your graphic is anchored to the horizontal center of your page, you can use the same center, then offset.
因为您的图形锚定到页面的水平中心，所以您可以使用相同的中心，然后进行偏移。
#switch {
height:50px;
width:50px;
background: #F00; /* Just so we can see it */
position: absolute;
top: 150px;
left: 50%; /* Put the left edge on the horizontal center */
margin-left: 148px; /* Move it 148px to the right of the horizontal center, placing it over the lightswitch */
}
回答by Jakub
What you need to do is, think about where you want the element to be (fixed will stick it in a coordinate location X/Y, absolute, will move with the document, relative is quite clearly relative to where it is).
你需要做的是，想想你想要元素的位置（固定将把它粘在坐标位置 X/Y，绝对，将随文档移动，相对相对于它所在的位置非常清楚）。
So with that said, I would recommend creating an 'anchor point' using
因此，话虽如此，我建议使用创建一个“锚点”
<div style="position: relative;" class="anchor-point">
<div style="position: absolute; top: 100px; right: 50px;">
<img href="" />
</div>
</div>
The anchor-pointmeans you can stick this element in an area of your page, the inner part, with position:absolute;lets you move FROM your anchor to anywhere you want (top/right/left/bottom), combine this with z-indexto layer your elements just how you want it.
这anchor-point意味着您可以将此元素粘贴在页面的一个区域（内部）中，position:absolute;让您可以从锚点移动到您想要的任何位置（顶部/右侧/左侧/底部），将其与z-index您想要的方式相结合来分层您的元素它。
This will guarantee that your element (that is pos:abs) will stay where you want it.
这将保证您的元素（即 pos:abs）将留在您想要的位置。
