absolute與relative的愛恨情仇
阿新 • • 發佈：2019-01-06
absolute
第一種情況：
程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>absolute與relative的相愛相殺</title> <style> .p{ width: 200px; border: 2px solid burlywood; margin: 100px auto; } .box1{ position: absolute; left: 100px; width: 300px; height: 300px; background-color: #DEB887; } .box2{ position: absolute; width: 200px; height: 200px; background-color: darkcyan; } span{color: red;} </style> </head> <body> <p>1,相對於一個<span>已定位的包含它</span>的元素</p> <div class="box1">父類 <div class="box2">子類</div> </div> <p class="p">菜鳥教程解釋：位置設定為 absolute 的元素，可定位於相對於第一個已定位（非靜態的）的包含它的元素的指定座標。此元素的位置可通過 "left"、"top"、"right" 以及 "bottom" 屬性來規定。</p> </body> </html>
截圖：
由結果可知，當父類為一個（已經定位）的元素時：子類（absolute）則以父類的左上角的原始基點進行定位（left,right,top,bottom,margin,padding）;
第二種情況：
程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>absolute與relative的相愛相殺</title> <style> .box1{ margin-left: 100px; width: 300px; height: 300px; background-color: #DEB887; } .box2{ position: absolute; width: 200px; height: 200px; background-color: darkcyan; } span{color: red;} </style> </head> <body> <p>2,相對於一個<span>未定位的包含它</span>的元素,且子類沒有<span>top,left,right,bottom(不包括marginpadding)</span></p> <div class="box1">父類 <div class="box2">子類</div> </div> </body> </html>
截圖
結果可知：預設基於父類左上角，且只能由margin以及padding調整位置
第三種：
程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>absolute與relative的相愛相殺</title> <style> .box{ position: absolute; left: 100px; width: 400px; height: 400px; background-color: red; } .box1{ margin-left: 100px; width: 300px; height: 300px; background-color: #DEB887; } .box2{ position:absolute; left: 0px; width: 200px; height: 200px; background-color: darkcyan; } span{color: red;} </style> </head> <body> <p>2,相對於一個<span>未定位的包含它</span>的元素,且子類存在<span>top,left,right,bottom(不包括marginpadding)</span>其中一項</p> <div class="box"> <div class="box1">父類 <div class="box2">子類</div> </div> </div> </body> </html>
截圖：
結果可知：如果子類定位為absolute，且存在TRBL其中一項，則以第一個的已定位的父類的左上角為基準，如沒有，則以瀏覽器左上角為基準。
relative(相對的單純，哈哈哈)
程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>absolute與relative的相愛相殺</title>
<style>
.box{
position: absolute;
left: 100px;
width: 400px;
height: 400px;
background-color: red;
}
.box1{
margin-left: 100px;
width: 300px;
height: 300px;
background-color: #DEB887;
}
.box2{
position:relative;
left: 0px;
width: 200px;
height: 200px;
background-color: darkcyan;
}
p{width: 300px;border: 2px solid #DEB887;}
span{color: red;}
</style>
</head>
<body>
<p>2,相對於一個<span>其正常位置</span>通過<span>top,left,right,bottom，margin，padding</span>進行定位</p>
<div class="box">
<div class="box1">父類
<div class="box2">子類</div>
</div>
</div>
<p style="position: relative;margin-top: 440px;">菜鳥解釋：生成相對定位的元素，相對於其正常位置進行定位。
因此，"left:20" 會向元素的 LEFT 位置新增 20 畫素。</p>
</body>
</html>
截圖：
結果可知：relative定位相對簡單，（但是如果一元素沒有父類，且定位為relative則就要考濾，其在html中的層次關係處於那一層次了）（重要）。