基本定義和用法
在 CSS 中，position 屬性指定一個元素（靜態的，相對的，絕對或固定，以及粘性定位）的定位方法的類型。
當設置 position 屬性的值為 absolute 時，生成絕對定位的元素，將該元素從文檔流中刪除，原來的占位不再存在，並相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
- 如果這個父元素是塊級元素，包含塊則設置為該元素的
border-box。 - 如果這個父元素是行內元素，包含塊則設置為該父元素元素的內容邊界。
- 如果元素沒有已定位的父元素，那么它的位置相對於
<html>。
.box {
position: relative;
margin: 0 auto;
padding: 10px;
width: 300px;
height: 200px;
background: rgb(66, 98, 104);
}
.box-item {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: rgb(65, 116, 126);
}
有無定位值的區別
position 為 absolute 的元素如果沒有設置 left, top 等值與 left:0; top:0; 的的效果一樣嗎？
答案是不一樣的，一個沒有設置 left 和 right 值的絕對定位的元素就像是一個行內塊元素，其表現得依舊在 DOM tree 中，對 margin 等屬性敏感，但是其實際寬高已經丟失，如果沒有設置高度，則其高度由其中的內容決定。
.box {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background: rgb(66, 98, 104);
}
.container {
margin: 0 auto;
width: 100px;
height: 100px;
background: rgb(68, 155, 172);
}
.box-item {
position: absolute;
width: 20%;
height:20%;
background: rgb(65, 116, 126);
}
對於設置了 left:0; top:0; 的絕對定位的元素，這個元素將會從 DOM 樹中脫離，獨立於文檔流，然后會根據相對於 static 定位以外的第一個父元素進行定位。
所以沒有定位值的 absolute 元素可以說是個更加變態(沒有實際寬度)的 float 元素(實際占據高度為 0)，所以浮動元素干的某些事情絕對定位元素也能做到。
絕對定位元素的百分比定位
CSS 設置絕對定位后 top,bottom 設置百分比定位是按父元素的高度來計算的，同樣 left,right 設置百分比定位是按父元素的寬度度來計算的。
.box {
position: relative;
margin: 0 auto;
width: 300px;
height: 200px;
background: rgb(66, 98, 104);
}
.box-item {
position: absolute;
top: 10%;
left: 10%;
width: 100px;
height: 100px;
background: rgb(65, 116, 126);
}
父元素有內邊界
如果父元素設置有 padding 值，則子元素定位 top,bottom 設置百分比定位是按父元素的高度 + 垂直內邊界來計算的，同樣 left,right 設置百分比定位是按父元素的寬度 + 水平內邊界來計算的。
/* box-sizing: content-box; */
.box {
position: relative;
margin: 0 auto;
padding: 10px 20px;
width: 200px;
height: 200px;
background: rgb(66, 98, 104);
}
.box-item {
position: absolute;
top: 10%;
left: 10%;
width: 100px;
height: 100px;
background: rgb(65, 116, 126);
}
當 box-sizing: border-box; 時，其計算與內邊界無關。
父元素有邊框
如果父元素設置有 border 值，則子元素定位設置的百分比定位值的計算與邊框無關。
/* box-sizing: content-box; */
.box {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background: rgb(66, 98, 104);
border: 10px solid rgb(117, 141, 145);
}
.box-item {
position: absolute;
top: 10%;
left: 10%;
width: 100px;
height: 100px;
background: rgb(65, 116, 126);
}
當 box-sizing: border-box; 時，如果父元素設置有 border 值，則子元素定位 top,bottom 設置百分比定位是按父元素的高度 - 垂直邊框來計算的，同樣 left,right 設置百分比定位是按父元素的寬度 - 水平邊框來計算的。
絕對定位元素的百分比寬高
絕對定位元素的百分比寬高是相對於其最近的父級別定位元素的 padding-box 的大小來計算的。
/* box-sizing: content-box; */
.box {
position: relative;
margin: 0 auto;
padding: 20px;
width: 200px;
height: 200px;
background: rgb(66, 98, 104);
border: 10px solid rgb(117, 141, 145);
}
.container {
margin: 0 auto;
width: 100px;
height: 100px;
background: rgb(68, 155, 172);
}
.box-item {
position: absolute;
top: 0;
left: 0;
width: 20%;
height:20%;
background: rgb(65, 116, 126);
}
當 box-sizing: border-box; 時，依然遵循上面的原則，所以計算絕對定位元素的百分比寬高時，應由 height - border 作為基礎。
寫在最后
若是文中有什么錯誤，歡迎大家指正，希望和大家在交流之中共同進步。