如何實現元素的固定垂直和相對水平定位？-css教學-PHP中文網

如何定位垂直固定但水平相對的元素

首頁

web前端

css教學

如何實現元素的固定垂直和相對水平定位？

Susan Sarandon

Dec 16, 2024 pm 08:38 PM

How to Achieve Fixed Vertical and Relative Horizontal Positioning of an Element?

如何定位垂直固定但水平相對的元素

在這種情況下，我們需要一個距離容器右側固定距離的按鈕，無論視口大小。它還應該隨視窗滾動，保持一致的垂直和水平偏移。要實現此目的：

定義一個具有固定寬度、高度和右邊距的容器 div (div.inflow)。
（可選）新增一個包裝器 div (div.positioner)將固定元素水平放置在容器內。
建立具有定義的寬度、高度和頂部的固定元素 (div.fixed) margin。
設定位置：固定在固定元素上，將其錨定到視口。
避免在固定元素上向左或向右設定。相反，利用容器和包裝 div 來建立水平位置。

HTML:

<body>
  <div class="inflow">
    <div class="positioner">
      <div class="fixed"></div>
    </div>
  </div>
</body>

登入後複製

CSS:

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

登入後複製

CSS:

CSS: ：如果容器寬度為不固定，則需要包裝器div (div.positioner)將固定元素推到容器的右側。

重要：在容器上設定溢位：隱藏沒有效果固定位置 div 超出其邊界。固定位置有效地將其從容器的溢出上下文中刪除。

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn