如何在滾動時定位垂直固定和絕對水平的元素？

位置元素垂直固定，絕對水平

用戶尋求一種解決方案，使按鈕與div 右邊緣保持一定距離，無論視口大小如何，同時隨視窗滾動。這可以使用以下策略來實現：

HTML 結構

<div class="inflow">
  <div class="positioner"> <!-- May not be needed -->
    <div class="fixed"></div>
  </div>
</div>

CSS 樣式

div.inflow {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}

div.fixed {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

關鍵點

• 固定垂直位置： 位置：固定在div 上。 fixed 確保它隨window.
• 絕對水平位置： 固定水平位置不是直接設定的。相反，它依賴包裝器 div（div.inflow 和可選的 div.positioner）來定義其相對於父 div 的位置。
• 動態調整：隨著容器 div 大小的變化，按鈕與右邊緣保持所需的距離。
• 溢位處理：固定位置元素不受其容器div的溢出上下文，即使設定了overflow:hidden屬性。

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