如何將絕對渲染按鈕定位在新行中？-css教學-PHP中文網

相對和絕對定位的元素

相對定位範例

Using relative positioning in CSS

絕對定位範例

Example of using absolute positioning

使用絕對定位在新行中渲染按鈕

範例

Lorem ipsum dolor sit amet.

結論

首頁

web前端

css教學

如何將絕對渲染按鈕定位在新行中？

王林

Sep 02, 2023 pm 05:53 PM

如何將絕對渲染按鈕定位在新行中？

如果您希望控制元素在網頁中的定位方式，我們必須使用 position CSS 屬性。定義文件中元素位置的屬性是必不可少的，它的 top、left、bottom 和 right 屬性和position 是一個簡寫屬性，可用來設定所有這四個屬性。

下面指定了我們可以與位置屬性一起使用的可能值 -

靜態- 元素依照文件的自然流程放置。頂部、右側、底部、左側或 z 索引屬性沒有差異。這是預設選項。
相對- 元素依照文件的自然流放置，其相對自身的偏移量由上、右、下、左的值決定。頁面佈局中為元素分配的空間與位置為靜態時的空間相同，因為偏移量對任何其他元素的位置沒有影響。

當 z-index 的值不是 auto 時，該值會建立一個新的堆疊上下文。它如何影響 table-*-group、行、列、儲存格和 table-caption 的元素尚未定義。
絕對- 該元素已從典型的文件流程中刪除，且頁面佈局中沒有為其留出空間。如果有，則將其與該祖先相關聯；如果不是，則將其放置在與第一個包含的區塊相關的位置。頂部、右側、底部和左側值定義其最終位置。

當 z-index 的值不是 auto 時，該值會建立一個新的堆疊上下文。絕對定位可防止框的邊距與其他邊距重疊。
已修正- 此元素已從典型文件流程中刪除，且頁面佈局中沒有為其留出空間。除非它的祖先之一將transform、perspective或filter屬性設為none以外的其他屬性（請參閱CSS Transforms Spec），或將will-change屬性設為transform，在這種情況下，祖先充當包含區塊，否則它相對於視窗建立的初始包含區塊定位。（請注意，瀏覽器之間的視角和過濾器差異可能會導致生成封閉塊。）頂部、右側、底部和左側值定義其最終位置。
Sticky - 元素根據文件的自然流定位，並根據上、右、下和左的值，然後相對於其元素進行偏移最近的滾動祖先和包含的區塊（最近的區塊級祖先），包括與表格相關的元素。其他元素的位置不受偏移量的影響。

新的堆疊上下文始終由該值建立。應該注意的是，黏性元素「黏」到具有「滾動機制」（當溢出被隱藏、滾動、自動或覆蓋時產生）的最近的祖先，即使該祖先不是真正的最近的祖先。滾動。

相對和絕對定位的元素

相對定位元素是指將「相對」作為其計算位置的元素，而絕對定位元素是指將「絕對」或「固定」作為其計算位置的元素。

相對定位範例

下面是使用相對定位的範例程式碼。

<!DOCTYPE html>
<html>
<head>
   <style>
      .relativePositioning {
         position: relative;
         left: 50px;
         border: 2px solid red;
      }
   </style>
</head>
<body>
   <h2 id="Using-relative-positioning-in-CSS">Using relative positioning in CSS</h2>
   <p>This is a sample paragraph onto which relative positioning is being applied.</p>
   <div class="relativePositioning">This part of the content has position : relative</div>
</body>
</html>

登入後複製

絕對定位範例

以下是使用絕對定位的範例程式碼。

<!DOCTYPE html>
<html>
<head>
   <style>
      .relativePositioning {
         position: relative;
         width: 500px;
         height: 250px;
         border: 2px solid red;
      }
      .absolutePositioning {
         position: absolute;
         top: 100px;
         right: 0;
         width: 300px;
         height: 150px;
         border: 2px solid red;
      }
   </style>
</head>
<body>
   <h2 id="Example-of-using-absolute-positioning">Example of using absolute positioning</h2>
   <p>Lorem ipsum dolor sit amet consectetur   adipisicing elit. Nesciunt, possimus.</p>
   <div class="relativePositioning">
      This is the container element with position : relative
      <div class="absolutePositioning">This is an example of absolute positioning</div>
   </div>
</body>
</html>

登入後複製

使用絕對定位在新行中渲染按鈕

現在我們了解了定位的工作原理以及如何在 CSS 中使用絕對定位。我們將運用我們的知識來解決手邊的問題。

範例

以下是在 CSS 中使用絕對定位在新行中呈現按鈕的範例。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
   <style>
      .outerBox {
         position: relative;
      }
      .btn-pri {
         color: #fff;
         padding: 0.5px 7% 0.5px 5px;
         height: 45px;
         display: inline-block;
         cursor: pointer;
         background: green;
         border: 2px solid #ccc;
      }
      .btn-txt {
         margin-top: 6px;
         margin-bottom: 6px;
      }
      .btn-pri-2 {
         position: absolute;
         left: 1px;
         top: 53px;
      }
   </style>
<body>
   <div class="outerBox">
      <a class="btn-pri btn-pri-1">
         <h5 id="Lorem-ipsum-dolor-sit-amet">Lorem ipsum dolor sit amet.</h5>
      </a>
      <a class="btn-pri btn-pri-2">
         <h5 id="Lorem-ipsum-dolor-sit-amet">Lorem ipsum dolor sit amet.</h5>
      </a>
   </div>
</body>
</html>

登入後複製