Question

请参阅我的网站Vault X

我一直试图让保险库旁边的灯开关成为可点击的功能。

然而，我不能让我的div保持固定在这个位置（调整窗口大小会导致它移动）。

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

Answer 1

执行position:absolute（或者更适当地position:fixed）指定文档正常流程之外的元素位置相对于具有非静态位置的第一个父项（在这种情况下（并且始终）使用position:fixed）浏览器窗口。）

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

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

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

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

Answer 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）将保留在您想要的位置。

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

3 个答案: