如何垂直固定元素並將其絕對水平定位？

如何定位垂直固定和絕對水平的元素

在Web開發中，經常需要以某種方式定位元素無論視口大小如何，它都保持一致。其中一個場景是垂直固定一個元素，同時與另一個元素保持特定的水平距離。

考慮以下挑戰：您需要一個按鈕來與容器 div 的右側保持一致的距離。無論視窗大小如何，按鈕都應保持在視窗內固定的垂直位置。

實現所需的定位

這可以透過利用位置：固定和位置：絕對的組合，如下所示code:

<div class="container">
  <div class="button"></div>
</div>

.container {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}
.button {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

這種方法的關鍵在於沒有明確設定.button 元素的left/right 屬性。相反，容器 div 和附加 div (.positioner) 用於建立水平定位。

.button 元素從 .container div 繼承其水平位置，而 .positioner div 推動 .button朝向容器 div 的右側。在此範例中，.button 元素與容器 div 的右邊緣保持 15px 的距離。

此外，.button 元素的固定垂直位置（頂部：60px）確保它保持在該垂直位置當頁面滾動時在視口內。

以上是如何垂直固定元素並將其絕對水平定位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！