將div固定到某個位置（通過調整窗口大小固定）

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