相對定位一個最大特點是：自己通過定位跑開了還佔用著原來的位置，不會讓給他周圍的諸如文字資料流之類的對象。相對定位也比較獨立，做什麼事它自己說了算，要定位的時候，它是以自己本身所在位置位移的（相對對象本身位移）。
相對定位常與絕對位置結合用，一般是給父級設定相對定位方式，子級元素就可以相對它進行方便的絕對位置了
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .orange{ width: 400px; height: 300px; background-color: orange; }/*紅色區塊設定為相對布局，雖然往下便宜150PX,但仍佔據了位置，使得黃色，綠色無法浮動到最左邊*/ .red{ width: 100px; height: 100px; background-color: red; float: left; position:relative; margin-top: 150px; } .yellow{ width: 100px; height: 100px; background-color: yellow; float: left; } .green{ width: 100px; height: 100px; background-color: green; float: left; }/*藍色區塊相對自身偏離了30px,10px,但黑色區塊的位置是以藍色之前的位置向下位移10px*/ .blue{ width:50px; height: 50px; background-color: blue; position: relative; top:30px; left:10px; } .black{ width:30px; height: 30px; background-color: black; margin-top: 10px; } </style></head><body> <p class="orange"> <p class = "red"> <p class = "blue"></p> <p class = "black"></p> </p> <p class = "yellow"></p> <p class = "green"></p> </p></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
