絕對定位position: absolute;
阿新 • • 發佈：2017-10-11
right log type itl 20px red left pre oct
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
position: absolute;
相配合使用的屬性分別有：
定位屬性：left、right、top、bottom
堆疊順序屬性：z-index
定位屬性是用來定位元素的位置的，四個方向可以設置位置；
堆疊順序屬性用來定義如果多個含有position屬性的元素的堆疊順序。
參照瀏覽器左上角，配合 top left right bottom（TLRB）進行定位，
1、在沒有設定TLRB,默認依據父級的坐標原點為起始點
2、如果設定了TLRB,並且父級沒有設定position屬性，
那麽當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定
3、如果設定了TLRB,並且父級設定position屬性，
那麽當前的absolute則以父級元素的左上角為原始點進行定位，位置將由TRBL決定
如果子元素沒有設置TLRB,默認以及父級的坐標原點為起始點。
如果設定了TRLB，父級元素有定義position屬性，則absolute的（0,0）位置在父級元素的左上角位置，位置由定位屬性(TLRB)決定；
如果設定了TRLB，父級元素沒有定義position屬性，則absolute的（0,0）位置在瀏覽器的右上角位置，位置由定位屬性(TLRB)決定。
所以誰absolute有隨機性的，大多是因為沒有註意到父級元素是否也定義過position屬性
fixed是特殊的absolute，即fixed總是以body為定位對象的，按照瀏覽器的窗口進行定位。*/
#parent{
position: absolute;
height: 200px;
width:200px;
border: 4px solid red;
background-color: #4cae4c;
margin-top:100px;
margin-left:100px;
}
#children{
position: absolute;
height: 20px;
width:60px;
border: 4px solid blue;
background-color: #761c19;
top:10px;
left: 50px;
}
</style>
</head>
<body style="margin: 0;padding: 0;background-color: gray">
<div id = ‘parent‘>
<div id="children">
</div>
</div>
</body>
</html>
絕對定位position: absolute;