實例講解CSS中相對定位和絕對定位的用法和區別（圖文）
- yulia原創
- 2018-10-23 11:21:5117747瀏覽
CSS中的position屬性可以設定元素的定位類型，例如fixed，relative，absolute等等，但是很多人搞不懂relative相對定位和absolute絕對定位的區別，這篇文章就和大家講講什麼是絕對定位，什麼是相對定位，以及相對定位和絕對定位的區別，有一定的參考價值，有興趣的朋友可以參考一下。
一、相對定位
相對定位是指，該元素相對自己原來位置，偏移一定距離，元素可以通過頂部top，底部bottom，左側left和右側right屬性來設定定位。 它相對的是它自己。
範例：大div裡麵包含5個小P，給P不同的類別名，分別設定絕對定位和相對定位，看看他們有什麼變化
#沒有設定定位的程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
.box{width: 400px;height: 500px;border: 1px solid black;margin: 50px auto;}
.p1{width: 100px;height: 100px;background: red;}
.p2{width: 100px;height: 100px;background: orange;}
.p3{width: 100px;height: 100px;background: yellow;}
.p4{width: 100px;height: 100px;background: green;}
.p5{width: 100px;height: 100px;background: purple;}
</style>
</head>
<body>
<div class="box">
<p class="p1">11</p>
<p class="p2">22</p>
<p class="p3">33</p>
<p class="p4">44</p>
<p class="p5">55</p>
</div>
</body>
</html>效果如圖所示：
#現在給第一個p標籤設定相對定位，讓他相對於自己原來的位置偏移50px，左邊偏移50px，具體程式碼如下：
.p1{width: 100px;height: 100px;background: red;position: relative;left: 50px;top: 50px;}效果圖：
對比前後效果圖，有沒有發現第一個p元素，它相對自己原來的位置發生了偏移，而且偏移以後，它依然佔據原來的位置，後面的元素不會填補，如果有重疊，會重疊在它文檔流元素之上，相對定位不會把其他元素擠掉。
二、絕對定位
絕對定位是指，該元素相對它的父元素偏移一定距離，元素可以通過頂部top，底部bottom，左側left和右側right屬性來設定定位。
註：相對的是父元素，而且這個父元素必須設定了position屬性。如果父元素沒有position屬性，則從最近的父元素開始找，直到找到body。
範例：給第三個p元素設定絕對定位，讓其上偏移200px，左偏移200px，具體程式碼如下：
.p3{width: 100px;height: 100px;background: yellow;position: absolute;left: 200px;top: 200px;}效果圖：
三、相對定位和絕對定位的區別############相對定位：###相對自己原來的位置發生偏移，不會脫離文檔流，不會刪除它原來在文檔流中佔據的位置，且後面是元素不會填補空位#########絕對定位：###相對它的父元素發生偏移（而且這個父元素必須設定了position屬性，如果父元素沒有position屬性，則從最近的父元素開始找，直到找到body為止），會脫離文檔流，後面的元素會填補它原來的位置。 ######以上給大家介紹了什麼是相對定位，什麼是絕對定位，以及相對定位和絕對定位的區別，初學者一定要自己動手嘗試，希望這篇文章對你有所幫助！ ######更多相關影片教學請造訪：###CSS教學#########
以上是實例講解CSS中相對定位和絕對定位的用法和區別（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn