4

请参考我的站点Vault X

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

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

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

4

3 回答 3

6

Doing position:absolute（或更恰当地在这里position:fixed）指定了一个元素在文档正常流程之外相对于第一个父级的位置，该父级的位置不是静态的（在这种情况下（并且总是带有position:fixed）浏览器窗口）。

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

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

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

于 2012-04-25T14:30:32.877 回答
4

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

#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 */
 }
于 2012-04-25T14:34:57.423 回答
2

您需要做的是，考虑您希望元素在哪里（固定将其粘贴在坐标位置 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）将保持在您想要的位置。

于 2012-04-25T14:41:15.680 回答