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

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

王林

發布： 2023-09-02 17:53:02

轉載

1465 人瀏覽過

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

如果您希望控制元素在網頁中的定位方式，我們必須使用 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>

登入後複製