資訊專欄INFORMATION COLUMN
摘要：絕對定位元素的布局計(jì)算公式表示內(nèi)容寬度，即標(biāo)準(zhǔn)盒子模型默認(rèn)值是默認(rèn)值是以水平方向從左至右為例說明一下絕對定位元素的位置或大小是如何定義的。
先拋兩個(gè)小問題：
絕對定位相對于誰來定位？
大多數(shù)人都知道是相對于最近的position設(shè)置為relative/absolute/fixed的父元素來定位。那如果所有父元素的position都沒有設(shè)置上面三個(gè)值，那又是相對誰來定位呢？
包含塊是什么？初始包含塊又是什么？
元素A包含元素B，A設(shè)置position:relative，B設(shè)置position:absolute;left:0;top:0，這個(gè)left:0;top:0是相對于A元素的content-box、padding-box還是margin-box的左上角？
如果你還不是很有把握說出來答案，可以先思考一下或者實(shí)踐一下，然后再閱讀后面的內(nèi)容。
絕對定位元素的特性絕對定位元素完全脫離文檔流，不會對后面兄弟元素的布局產(chǎn)生任何影響
其位置（或者說大?。┦怯?b>top right bottom left四個(gè)屬性決定的
絕對定位元素的margin不會和其他元素的margin折疊
上面說到絕對定位元素的大小是由top right bottom left四個(gè)屬性決定的，這四個(gè)屬性是相對于絕對定位元素的包含塊來定位的。
包含塊
絕對定位元素的包含塊是由其最近的position屬性設(shè)置為relative、absolute或fixed的祖先元素，按照以下方式生成的：
如果這個(gè)祖先元素是行內(nèi)元素...此種情況請參考后續(xù)文章
否則，包含塊是由祖先元素的padding edge組成（即相對于祖先元素padding-box進(jìn)行定位）
如果絕對定位元素的所有祖先元素的position屬性都沒有設(shè)置relative、absolute或fixed，則其包含塊為初始包含塊。
初始包含塊根元素（在HTML文檔中即元素）所在的包含塊即是初始包含塊，對于瀏覽器來說：初始包含塊的大小即是視口的大小，但是是以畫布原點(diǎn)為錨點(diǎn)的。
瀏覽器的視口是固定在那不變的，但是一個(gè)文檔可能會很長，可以上下滾動，視口中的內(nèi)容會不斷變化。初始包含塊可以簡單理解為第一個(gè)視口區(qū)域（這句話是我自己造的），上圖：
頁面滾動之后：
初始包含塊 絕對定位之初始包含塊
初始包含塊不是html，也不是body，而是指視口。初始包含塊不是html，也不是body，而是指視口。初始包含塊不是html，也不是body，而是指視口。初始包含塊不是html，也不是body，而是指視口。初始包含塊不是html，也不是body，而是指視口。初始包含塊不是html，也不是body，而是指視口。初始包含塊不是html，也不是body，而是指視口。初始包含塊不是html，也不是body，而是指視口。初始包含塊不是html，也不是body，而是指視口。滾到底啦，沒有更多內(nèi)容啦~~~我是絕對定位元素。
紅色邊框代表html元素，藍(lán)色邊框代表body元素，由gif圖可以進(jìn)一步加深對初始包含塊的理解：初始包含塊并不是大多數(shù)人認(rèn)為的html或body元素，這是個(gè)誤區(qū)，要糾正！
絕對定位元素的大小 靜態(tài)位置（static position）一個(gè)元素的靜態(tài)位置可以簡單理解為這個(gè)元素在普通文檔流中的位置，就是這個(gè)元素的position為static，float為none時(shí)，元素在文檔中所處的位置。
靜態(tài)位置的left值：包含塊的左邊界到當(dāng)前定位元素的左外邊距（Left Margin）邊界的距離
靜態(tài)位置的right值：包含塊的右邊界到當(dāng)前定位元素的右外邊距（Right Margin）邊界的距離
初始包含塊 絕對定位元素1絕對定位元素2body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素
從上面代碼可以看出，.abs和.abs2兩個(gè)元素的靜態(tài)位置的left值都為10px（即body的padding-left值），我們不設(shè)置.abs的left值，即默認(rèn)auto，而.abs2的left設(shè)置為10px，會看到兩個(gè)元素距離包含塊左邊的距離是一樣的。
計(jì)算公式（width表示內(nèi)容寬度，即標(biāo)準(zhǔn)盒子模型）：
"left" + "margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" + "right" = width of containing block
left、width、right默認(rèn)值是auto
margin-left、margin-right默認(rèn)值是0
以水平方向（從左至右：ltr）為例說明一下絕對定位元素的位置（或大?。┦侨绾味x的。起決定因素的有left right width，每個(gè)屬性都可以設(shè)置或者不設(shè)置值，默認(rèn)為auto，設(shè)置了值的在表格中用1表示，總共有2 * 2 * 2 = 8 種情況：
| Left | Width | Right | 布局 |
|---|---|---|---|
| auto | auto | auto | 把margin-left和margin-right為auto的設(shè)置為0；把left設(shè)置為靜態(tài)位置的left值；寬度自適應(yīng)：margin-right邊緣最遠(yuǎn)到right為0的位置（如果margin-right為0，則取border-right邊緣，如果border-right-width也為0，則取padding-right邊緣，下同） |
| 1 | auto | auto | 把margin-left和margin-right為auto的設(shè)置為0；寬度自適應(yīng)：margin-right邊緣最遠(yuǎn)到right為0的位置 |
| auto | auto | 1 | 把margin-left和margin-right為auto的設(shè)置為0；寬度自適應(yīng)：margin-left邊緣最遠(yuǎn)到left為0的位置 |
| auto | 1 | auto | 把margin-left和margin-right為auto的設(shè)置為0；把left設(shè)置為靜態(tài)位置的left值； |
| 1 | 1 | auto | 把margin-left和margin-right為auto的設(shè)置為0；從左至右按照各屬性值布局 |
| auto | 1 | 1 | 把margin-left和margin-right為auto的設(shè)置為0；從右到左按照個(gè)屬性值布局 |
| 1 | auto | 1 | 把margin-left和margin-right為auto的設(shè)置為0；寬度自動拉伸 |
| 1 | 1 | 1 | ① 如果margin-left和margin-right都為auto，此時(shí)二者相等，則按照上述方程計(jì)算出對應(yīng)的margin值；如果此時(shí)計(jì)算出來的margin值為負(fù)值，則設(shè)置margin-left為0，然后根據(jù)方程再計(jì)算出margin-right的值。 ② 如果margin-left、margin-right中有一個(gè)為auto，則按照方程計(jì)算出這個(gè)值； ③ 如果margin-left、margin-right都設(shè)置了值，且導(dǎo)致方程左右不相等，則忽略right值。 |
上面是以水平方向布局講述了絕對定位元素的寬度是如何定義的，高度是類似的，就不再詳細(xì)闡述了，想進(jìn)一步了解細(xì)節(jié)的同學(xué)請參考 https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height
本文主要參考：
https://www.w3.org/TR/CSS22/visudet.html
篇幅已經(jīng)很長了，還有一部分知識點(diǎn)沒講到：
包含塊部分：
絕對定位元素的包含塊是由其最近的position屬性設(shè)置為relative、absolute或fixed的祖先元素，按照以下方式生成的：
如果這個(gè)祖先元素是行內(nèi)元素...（包含塊是如何定義的？）
布局部分：
上述所講的絕對定位元素的布局是針對非可替換元素，如果是可替換元素，布局又是怎樣的？這些內(nèi)容將在后續(xù)文章中做進(jìn)一步闡述。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112090.html
摘要：注意當(dāng)該固定元素的祖先元素的屬性非時(shí)，容器由瀏覽器窗口改為該祖先元素粘性定位，相當(dāng)于相對定位和固定定位的混合。粘性定位根據(jù)一個(gè)閾值決定，在大于等于閾值時(shí)采用相對定位，小于閾值后則為固定定位。理論上來說，全部 position 的取值有8個(gè) 包括：position：static | relative | absolute | fixed | sticky | initial | inherit...
摘要：寫在前面垂直水平居中即垂直與水平方向上都要居中，也就是視覺效果中的，處于視圖的正中間。我們把需要垂直水平居中的設(shè)置為。使用使塊級元素垂直居中是很簡單的。 寫在前面： 垂直水平居中即垂直與水平方向上都要居中，也就是視覺效果中的，處于視圖的正中間。下面，我們來講講幾個(gè)css中常用的垂直水平居中的解決方案 方法1: 1、把外層的div的顯示方式設(shè)置為table，即display: table...
摘要：交互中的復(fù)雜問題拖動物體擺放位置物體的寬高，起點(diǎn)位置都已計(jì)算拖動物體過程中移動過程中移動距離需要縮放元素目標(biāo)位置是否為預(yù)設(shè)的位置判斷預(yù)設(shè)位置已進(jìn)行計(jì)算 需求：需要展示的數(shù)據(jù)已在數(shù)據(jù)庫設(shè)置好，并且是以大屏幕為準(zhǔn)，現(xiàn)在需要在不同設(shè)備上顯示出來 實(shí)現(xiàn)：所有物體都采用絕對定位，根據(jù)實(shí)際屏幕與數(shù)據(jù)庫設(shè)置的屏幕尺寸比例，對數(shù)據(jù)進(jìn)行縮放 背景 居中鋪滿 background-position: ...
閱讀 2044·2021-08-21 14:09
閱讀 509·2019-08-30 15:44
閱讀 2136·2019-08-29 16:32
閱讀 1394·2019-08-29 15:36
閱讀 3479·2019-08-29 12:43
閱讀 2806·2019-08-29 11:14
閱讀 452·2019-08-28 18:26
閱讀 2271·2019-08-26 13:57
