将 div 固定到某个位置（通过调整窗口大小保持固定）答案

【问题标题】：Fixing a div to a certain position (stays fixed with window resize)将 div 固定到某个位置（通过调整窗口大小保持固定）
【发布时间】：2012-05-06 06:13:25
【问题描述】：

请参考我的网站Vault X

我一直在尝试将保险库旁边的电灯开关设为可点击功能。

但是，我不能让我的 div 固定在这个位置上（调整窗口大小会导致它四处移动）。

实现这一目标的最佳方法是什么？

【问题讨论】：

标签： css html positioning absolute

【解决方案1】：

执行position:absolute（或者更恰当的这里position:fixed）指定了一个元素位置，相对于第一个父级的位置不是静态的（在这种情况下（并且始终使用position:fixed） ) 浏览器窗口)。

因此，由于您指定了顶部和右侧位置，因此这些值是固定的。当您将右边框移入时，与浏览器视口的距离必须保持不变，因此元素会移动。

您可以尝试从左侧定位，但这只会防止从右侧调整大小（如果我将左角拖入，元素会移动）

或者，您应该将该元素静态放置在文档中，在您的 #wrapper div 中，以便调整窗口大小不会影响文档流。

【讨论】：

【解决方案2】：

由于您的图形锚定在页面的水平中心，您可以使用相同的中心，然后进行偏移。

#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 */
 }

【讨论】：

如果我随后调整窗口左侧的大小，元素仍会移动。
它会移动，但以中心为中心，与图形相同。当您调整窗口的宽度时，它仍会放置在图形中的灯开关上。
它仍然在调整大小，但我想出了将开关创建为单独图像的解决方案，因此如果位置稍微偏离也没关系。
此评论已删除

【解决方案3】：

你需要做的是，想想你想要元素在哪里（固定会粘在一个坐标位置X/Y，绝对的，会随着文档移动，相对的相对于它所在的位置很清楚） .

话虽如此，我建议使用

创建一个“锚点”

<div style="position: relative;" class="anchor-point">
   <div style="position: absolute; top: 100px; right: 50px;">
   <img href="" />
   </div>
</div>

anchor-point 表示您可以将此元素粘贴在页面的内部区域，position:absolute; 可以让您从锚点移动到您想要的任何位置（上/右/左/下），将其结合起来使用z-index 将您的元素按您想要的方式分层。

这将保证您的元素（即 pos:abs）将保持在您想要的位置。

【讨论】：