一、相對定位介紹
相對定位是 CSS 中的一種定位方式，它與絕對定位類似，在文檔流中脫離了當前文檔的位置，但它相對於元素原本的位置進行偏移，而不是相對於文檔根元素。
相對定位通過使用 top、bottom、left、right 屬性來進行定位，同時不影響文檔中其他元素的位置和尺寸。
二、相對定位與文檔流
相對定位不會像絕對定位那樣完全脫離文檔流，所以它仍然佔據着原來的位置，而這個位置的大小和尺寸不變，只是偏移了。
如果相對定位元素移動時會導致它與其他元素產生重合或遮擋，可使用 z-index 屬性來調整元素的層疊順序。
三、相對定位和浮動元素
相對定位的元素並不影響浮動元素的位置，也不會被浮動元素遮擋。所以，當需要對浮動元素進行精準定位時，可以使用相對定位。
四、相對定位和父元素位置
相對定位時，元素實際上是相對於其原始位置進行移動的，而不是相對於其所在的容器移動。因此，一個相對定位的元素不會移動其父元素的位置。但當它移出容器時，父容器的高度會擴大以適應它的新位置。
五、相對定位屬性示例
<div style="position:relative; top:20px; left:20px;">相對定位</div>
六、小結
相對定位是一種簡單而實用的定位方式，它可以讓我們將元素移動到其原始位置的相對位置，而不會影響到其他元素的位置和尺寸。在CSS布局中，相對定位能夠解決一些複雜的布局問題，同時也便於我們進行一些微小尺寸或位置的調整。
原創文章，作者：UGHQ，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/140791.html
微信掃一掃 
支付寶掃一掃 