實例講解CSS中相對定位和絕對定位的用法和區別（圖文）-css教學-PHP中文網

首頁

web前端

css教學

實例講解CSS中相對定位和絕對定位的用法和區別（圖文）

yulia

Oct 23, 2018 am 11:21 AM

css相對定位絕對定位

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>

效果如圖所示：

實例講解CSS中相對定位和絕對定位的用法和區別（圖文）

#現在給第一個p標籤設定相對定位，讓他相對於自己原來的位置偏移50px，左邊偏移50px，具體程式碼如下：

.p1{width: 100px;height: 100px;background: red;position: relative;left: 50px;top: 50px;}

效果圖：

實例講解CSS中相對定位和絕對定位的用法和區別（圖文）

對比前後效果圖，有沒有發現第一個p元素，它相對自己原來的位置發生了偏移，而且偏移以後，它依然佔據原來的位置，後面的元素不會填補，如果有重疊，會重疊在它文檔流元素之上，相對定位不會把其他元素擠掉。

二、絕對定位

絕對定位是指，該元素相對它的父元素偏移一定距離，元素可以通過頂部top，底部bottom，左側left和右側right屬性來設定定位。

註：相對的是父元素，而且這個父元素必須設定了position屬性。如果父元素沒有position屬性，則從最近的父元素開始找，直到找到body。

範例：給第三個p元素設定絕對定位，讓其上偏移200px，左偏移200px，具體程式碼如下：

.p3{width: 100px;height: 100px;background: yellow;position: absolute;left: 200px;top: 200px;}

效果圖：

實例講解CSS中相對定位和絕對定位的用法和區別（圖文）

##比較圖1和圖3可以發現，設定了絕對定位的元素，會脫離文件流，後面的元素會被填滿上來。因為第三個p標籤的父元素為div，沒有給div設定position屬性，所以它最終找到body，相對於body發生了偏移。

三、相對定位和絕對定位的區別############相對定位：###相對自己原來的位置發生偏移，不會脫離文檔流，不會刪除它原來在文檔流中佔據的位置，且後面是元素不會填補空位#########絕對定位：###相對它的父元素發生偏移（而且這個父元素必須設定了position屬性，如果父元素沒有position屬性，則從最近的父元素開始找，直到找到body為止），會脫離文檔流，後面的元素會填補它原來的位置。 ######以上給大家介紹了什麼是相對定位，什麼是絕對定位，以及相對定位和絕對定位的區別，初學者一定要自己動手嘗試，希望這篇文章對你有所幫助！ ######更多相關影片教學請造訪：###CSS教學#########

以上是實例講解CSS中相對定位和絕對定位的用法和區別（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn