首頁 > 文章 > web前端 > 如何將絕對渲染按鈕定位在新行中？

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

王林轉載: 2023-09-02 17:53:021370瀏覽

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

如果您希望控制元素在網頁中的定位方式，我們必須使用 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>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>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 class="btn-txt">Lorem ipsum dolor sit amet.</h5>
      </a>
      <a class="btn-pri btn-pri-2">
         <h5 class="btn-txt">Lorem ipsum dolor sit amet.</h5>
      </a>
   </div>
</body>
</html>

結論

總而言之，定位元素絕對允許您透過指定按鈕在頁面上的確切位置來在新行中呈現按鈕。這可以透過將元素的“position”屬性設為“absolute”，然後提供頂部、左側、右側或底部屬性的值來指示您想要將其放置的確切位置來完成。如果使用得當，絕對定位可以幫助您以最少的努力創建整潔的佈局。

以上是如何將絕對渲染按鈕定位在新行中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用CSS創造來電動畫效果？下一篇：如何使用CSS創造來電動畫效果？

看更多