css中相對定位（relative）與絕對定位（absoulte）的區別
-
position屬性值分為以下幾種
-
相對定位（陳述句：position:relative）
1.設為相對定位的元素，參考點是它自己定位（移動）之前的位置，不是相對于父節點，也不是相對于平級節點，元素框使用left，right，top，buttom屬性進行偏移后，偏移前的位置仍然保留，這一特性也會對頁面的其他元素造成影響，可能會覆寫其他框，造成頁面混亂，但使用margin類屬性進行偏移，不會保留偏移前的位置， -
絕對定位（陳述句：position:absoulte）
1.設為絕對定位的元素，會對最近的已定位的祖先來定位，如果不存在已定位（設定了絕對定位或者相對定位）的祖先元素則對頁面的body元素進行定位，
2.設為絕對定位的元素，將會脫離檔案流，因此它們可以覆寫頁面的其他元素，可以通過z–index屬性來控制這些層的對方順序，
3.注意：position:absolute，float會隱式地改變display的型別（display：none除外），即是當元素設定position:absolute、float:left、float:right中任意一個時，都會讓元素以display:inline-block的方式顯示（特點是：可以設定長寬，默認寬度不占滿父元素），這時，即使故意設定display:inline; display:block都是無效的，
但是float在IE6下的雙邊距bug就是用display:inline; 來解決的，
position:relative不會隱式改變display的型別， -
例子
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{ width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
left: 40px;
top: 40px; }
.box2{
width: 200px;
height: 200px;
border: 1px solid blue;
position: absolute;
left: 40px;
top: 40px; }
.box3{ width: 100px;
height: 100px;
border: 1px solid orange;
position:absolute;
left: 40px;
top: 40px; }
</style></head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div></div>
</body>
</html>
設定3個正方形，box1為紅色邊框，box2藍色邊框，box3橙色邊框，box1為box2的父級，box2為box3的父級，
如果將box2的絕對定位取消，box2的left和top屬性將會不生效，box3找到存在定位且為box3祖先級的box1進行了定位，所以會變成下圖效果，
將box1和box2的絕對定位都取消，此時box3將相對于body進行定位，如下圖，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/145465.html
標籤：其他