詳解 CSS 絕對定位

時間 2019-11-15

標籤詳解 css 絕對定位欄目 CSS 简体版

原文原文鏈接

基本定義和用法html

在 CSS 中，position 屬性指定一個元素（靜態的，相對的，絕對或固定，以及粘性定位）的定位方法的類型。java

當設置 position 屬性的值爲 absolute 時，生成絕對定位的元素，將該元素從文檔流中刪除，原來的佔位再也不存在，並相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。ide

若是這個父元素是塊級元素，包含塊則設置爲該元素的 border-box。
若是這個父元素是行內元素，包含塊則設置爲該父元素元素的內容邊界。
若是元素沒有已定位的父元素，那麼它的位置相對於 <html>。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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; 的的效果同樣嗎？htm

答案是不同的，一個沒有設置 left 和 right 值的絕對定位的元素就像是一個行內塊元素，其表現得依舊在 DOM tree 中，對 margin 等屬性敏感，可是其實際寬高已經丟失，若是沒有設置高度，則其高度由其中的內容決定。開發

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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)，因此浮動元素乾的某些事情絕對定位元素也能作到。it

絕對定位元素的百分比定位io

CSS 設置絕對定位後 top,bottom 設置百分比定位是按父元素的高度來計算的，一樣 left,right 設置百分比定位是按父元素的寬度度來計算的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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 設置百分比定位是按父元素的寬度 + 水平內邊界來計算的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/ 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 值，則子元素定位設置的百分比定位值的計算與邊框無關。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/ 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 的大小來計算的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/ 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 做爲基礎轉載於https://www.javazhiyin.com/11891.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。