在 CSS 中，position 屬性是用來控制元素在頁面中的位置的。position:relative 是 position 屬性的一個常用值，它允許元素相對于其正常位置進行偏移。

要使用 position:relative，只需要將該屬性添加到要偏移的元素上。例如，以下代碼將創建一個紅色方塊，并將其相對于其正常位置向右偏移 50px，向下偏移 25px：

運行上面的代碼，你將看到一個紅色方塊出現在容器的左上角，并且相對于其正常位置向右偏移 50px，向下偏移 25px。

position:relative 的另一個優點是它允許元素與其他元素重疊。例如，以下代碼將創建兩個紅色方塊，第一個方塊位于第二個方塊之上：

運行上面的代碼，你將看到兩個紅色方塊，其中一個位于另一個之上。

position:relative 的優點

輕松控制元素位置允許元素相對于其正常位置偏移允許元素與其他元素重疊

position:relative 的缺點

相對于其他元素定位時，可能會產生意外結果可能導致性能問題，特別是頁面上有大量元素時

結論

CSS position:relative 是一個強大的工具，可用于輕松控制元素位置。它可以用于偏移元素、創建重疊元素，以及執行其他各種布局任務。但是，重要的是要記住 position:relative 的優點和缺點，以便在項目中有效地使用它。

---

---

相關標簽： relative、 CSS、 輕松控制元素位置的利器、 揭秘csol大災變劇情、 揭秘、 position、

上一篇：CSSpositionrelative詳解讓元素遵守相對定

下一篇：了解positionrelative的工作原理精確定位容