資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在新的行中絕對定位渲染按鈕？
如果您希望控制元素在網頁中的定位方式，則必須使用position CSS 屬性。定義文件中元素位置的屬性至關重要，包括其 top、left、bottom 和 right 屬性，而 position 則是一個簡寫屬性，可用於設定所有這四個屬性。
我們可以在 position 屬性中使用的可能值如下所示：
static - 元素根據文件的自然流程放置。top、right、bottom、left 或 z-index 屬性不會產生任何差異。這是預設選項。
relative - 元素根據文件的自然流程放置，其相對於自身的偏移量由 top、right、bottom 和 left 的值決定。頁面佈局中分配給元素的空間與其 position 為 static 時相同，因為偏移量不會影響任何其他元素的位置。
當 z-index 的值不是 auto 時，此值將建立一個新的堆疊上下文。它將如何影響 table-*-group、row、column、cell 和 table-caption 的元素尚未定義。
absolute - 元素從正常的文件流中移除，頁面佈局中不會為其保留空間。如果存在祖先元素，則相對於該祖先元素定位；否則，相對於第一個包含塊定位。top、right、bottom 和 left 值定義其最終位置。
當 z-index 的值不是 auto 時，此值將建立一個新的堆疊上下文。絕對定位可以防止盒子邊距與其他邊距摺疊。
fixed - 元素從正常的文件流中移除，頁面佈局中不會為其保留空間。除非其祖先元素之一的 transform、perspective 或 filter 屬性設定為非 none（參見 CSS 變換規範）或 will-change 屬性設定為 transform，在這種情況下，該祖先元素充當包含塊，否則它相對於視口建立的初始包含塊定位。（請注意，瀏覽器之間的 perspective 和 filter 差異可能會導致生成封閉塊。）top、right、bottom 和 left 值定義其最終位置。
sticky - 元素根據文件的自然流程放置，然後根據 top、right、bottom 和 left 的值，相對於其最近的滾動祖先和包含塊（最近的塊級祖先）進行偏移，包括與表格相關的元素。其他元素的位置不受偏移量的影響。
此值始終建立一個新的堆疊上下文。需要注意的是，粘性元素會“貼上”到具有“滾動機制”的最近祖先（當 overflow 為 hidden、scrolled、auto 或 overlay 時產生），即使該祖先不是真正滾動的最近祖先。
相對和絕對定位的元素
相對定位的元素是指其計算位置為“relative”的元素，而絕對定位的元素是指其計算位置為“absolute”或“fixed”的元素。
相對定位示例
下面是一個使用相對定位的程式碼示例。
<!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”，然後提供 top、left、right 或 bottom 屬性的值來指示您要將它放置的確切位置來實現。如果使用正確，絕對定位可以幫助輕鬆建立整潔的佈局。
1K+ 次瀏覽
