定位屬性 position relative absolute | CSS
在Web佈局上， CSS 提供了一個強大的工具：position: relative 和 position: absolute。這兩個屬性在定位元素在文檔中的位置方面起著關鍵作用。
See the Pen 定位屬性 position relative absolute | CSS by lenrich (@lenrich) on CodePen.
CSS定位基礎知識:
position 屬性在指定元素的定位方面至關重要。當元素應用了 position: relative 樣式時，它成為其子元素（應用了 position: absolute）的參考點。這為對元素放置的精確控制奠定了基礎。
Position: Relative - 創建參考點:
應用 position: relative 的元素相對於其在文檔流中的正常位置進行定位。這允許進行微調，而不會干擾整體佈局。它作為 position: absolute 的子元素的參考點，實現對它們的精確控制。
.parent {
position: relative;
}
.child {
position: absolute;
top: 20px;
left: 30px;
}
Position: Absolute - 精確定位:
使用 position: absolute 的元素相對於其最近已定位的父元素進行定位，通常是應用了 position: relative 的元素。這允許對放置進行細微控制。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Tags