資訊專欄INFORMATION COLUMN
摘要：有三種情況將使得元素脫離文檔流而存在，分別是浮動(dòng)，絕對(duì)定位，固定定位。我的回答是相對(duì)自己文檔流中的原始位置定位。這里就不解釋脫離文檔流的問題，主要研究它的定位問題。
一 前言
CSS定位是CSS布局只能夠重要的一環(huán)。本篇文章帶你解讀定位屬性，可以讓你更加深入的理解定位帶來的一些特性，熟練使用CSS布局。
二 正文 1.文檔流布局的概念將窗體自上而下分成一行行， 并在每行中按從左至右的順序排放元素，即為文檔流。?每個(gè)非浮動(dòng)塊級(jí)元素都獨(dú)占一行， 浮動(dòng)元素則按規(guī)定浮在行的一端。 若當(dāng)前行容不下， 則另起新行再浮動(dòng)。?內(nèi)聯(lián)元素也不會(huì)獨(dú)占一行。 幾乎所有元素(包括塊級(jí)，內(nèi)聯(lián)和列表元素）均可生成子行， 用于擺放子元素。
?有三種情況將使得元素脫離文檔流而存在，分別是?浮動(dòng)，絕對(duì)定位，?固定定位。 但是在IE6中浮動(dòng)元素也存在于文檔流中。
如上圖所示，這就是正常的文檔流布局。一個(gè)一個(gè)挨著的，到頭了，另起一行，接著排布。
2.知識(shí)基礎(chǔ)（1）相對(duì)定位：相對(duì)定位的元素是在文檔中的正常位置偏移給定的值，但是不影響其他元素的偏移。相對(duì)定位的元素并未脫離文檔流。
（2）絕對(duì)定位：絕對(duì)定位的元素則脫離了文檔流。在布置文檔流中其它元素時(shí)，絕對(duì)定位元素不占據(jù)空間。絕對(duì)定位元素相對(duì)于最近的非static祖先元素定位。當(dāng)這樣的祖先元素不存在時(shí)，則相對(duì)于根級(jí)容器定位。
（3）固定定位：固定定位與絕對(duì)定位相似，也脫離了文檔流，但元素的包含塊為viewport視口。該定位方式常用于創(chuàng)建在滾動(dòng)屏幕時(shí)仍固定在相同位置的元素。
（4）默認(rèn)定位：文檔中按照正常順序出現(xiàn)的定位。
position:relative
什么是相對(duì)定位？相對(duì)什么定位？這是重要的問題。我的回答是——相對(duì)自己文檔流中的原始位置定位。它的特點(diǎn)是——不會(huì)脫離文檔流。
也就是說，使用position:relative定位，其元素依舊在文檔流中，他的位置可以使用left、right、top、bottom、z-index等定位參數(shù)，但是，它的存在，還是會(huì)影響文檔中緊跟在他周圍的元素的。
下面，我們看一下實(shí)際效果。
如上圖的演示，我給test3加上了position:relative定位效果。
代碼如下：
position: relative; left: -20px; top: 20px;
可以清晰的從圖上看出來，test3根據(jù)CSS參數(shù)left: -20px;top: 20px;發(fā)生了位移。
但是！但是！但是！重要的事情說三遍，它的位移并沒有對(duì)周圍的元素有任何的影響?。∷廊淮嬖谟谖臋n流中。它的位移是根據(jù)它在文檔流中的原始位置發(fā)生的?。?/strong>這一點(diǎn)非常非常重要。
position:fixed
相比而言，這個(gè)參數(shù)是最好理解的。它相對(duì)于瀏覽器的窗口進(jìn)行定位。同時(shí)——它會(huì)脫離文檔流。
代碼如下：
position: fixed; right:20px; top: 20px;
這是初始狀態(tài)，我們可以看到它的特點(diǎn)：
它脫離了文檔流，原來文檔流中不存在它的位置，test4好像test3不存在一樣的緊貼在了test2的后面。它的right:20px;top: 20px;參數(shù)是相對(duì)瀏覽器窗口定位的。
好，我們?cè)賮砜匆幌拢?dāng)頁面發(fā)生滾動(dòng)的效果圖：
當(dāng)頁面發(fā)生了滾動(dòng)，我們可以看到，頁面的內(nèi)容已經(jīng)根據(jù)滾動(dòng)條的位置發(fā)生了位移。但是我們的test3 依舊是在相對(duì)于瀏覽器的位置。
5.絕對(duì)定位position:absolute
絕對(duì)定位是一個(gè)非常牛逼的屬性，牛逼到，你不知道會(huì)發(fā)生什么。注意，它的解釋是什么——“生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。”
也就是說，它可以相對(duì)于各種各樣的東西進(jìn)行定位。除了?static?其他都可以?。。∽⒁?！注意！注意！?是除了?！
也正是因?yàn)檫@一牛逼特性，導(dǎo)致很多人對(duì)此概念混亂。其實(shí)，這個(gè)一點(diǎn)也不混亂，我們可以將概念理順了，分成幾個(gè)情況來說。
PS:position:absolute和position:fixed一樣是會(huì)脫離文檔流的。這里就不解釋脫離文檔流的問題，主要研究它的定位問題。
(1)它的所有父元素的屬性都是?position:static
怎么理解這個(gè)標(biāo)題？position:static?是所有html元素默認(rèn)參數(shù)。就是說，這個(gè)元素的所有上級(jí)元素，你都沒有使用過定位方式。
我們通過如下代碼模擬一個(gè)場景：
Document
test1
test2
test3
如上，test3是test2的子元素，test1的孫元素。我們來看一下效果圖：
如上圖所示。我們可以看到，test3既沒有相對(duì)于父元素定位，也沒有相對(duì)于爺元素定位。它居然和position:fixed一樣！相對(duì)于瀏覽器定位了??！
?。?！這是一個(gè)錯(cuò)覺！??！
我們來看一下瀏覽器發(fā)生滾動(dòng)之后的效果，如下圖所示：
如上圖所示，它并非是相對(duì)于瀏覽器定位，而是相對(duì)于文檔定位。
如果你有一點(diǎn)js基礎(chǔ)的話，那么應(yīng)該很容易理解。$(document)和$(window)的差別（為了看得清楚，用了JQ寫法）
相對(duì)于文檔，就是相對(duì)于整個(gè)頁面來進(jìn)行布局，而相對(duì)于窗口，則是相對(duì)于瀏覽器的可視區(qū)域進(jìn)行定位，這二者有本質(zhì)的區(qū)別的。
這種情況在實(shí)際應(yīng)用中有，但是不多。
(2)它的父元素的屬性是?position:relative
上面，我們已經(jīng)說過了，position:relative是相對(duì)于自身原始位置定位，其自身并沒有脫離文檔流。而它的子元素，使用position:absolute參數(shù)是什么效果呢？我們來做個(gè)試驗(yàn)。下面是代碼：
Document
test1
test2
test3
我們給test2加上了position:relative屬性，并給出了偏移值，然后，再給test3使用絕對(duì)定位，使用了為負(fù)數(shù)的偏移值，我們來看一下效果圖，如下：
從上圖我們可以看到，test2如我們所愿的，相對(duì)于自身的位置發(fā)生了偏移，而test3則相對(duì)于test2發(fā)生了偏移。
從這個(gè)試驗(yàn)我們可以看出，當(dāng)一個(gè)元素設(shè)置了position:absolute屬性之后，而它的父元素的屬性為position:relative則，它不再是相對(duì)于文檔定位，而是相對(duì)于父元素定位。
這一點(diǎn)非常重要。最最重要的是--父元素設(shè)置為position:relative并不會(huì)脫離文檔流，也就是說——利用給父元素設(shè)置position:relative屬性，再將子元素設(shè)置為position:absolute就可以在文檔流中實(shí)現(xiàn)需要的定位。這一點(diǎn)異常重要，也是非常常用的方法?。≒S:基本上焦點(diǎn)圖等常見應(yīng)用，都是使用了這種方式）。
(3)它的父元素的屬性是?position:fixed
上面，我們說了父元素為position:relative的情況，這種情況比較常見，那么它的父元素為position:fixed?又是什么情況呢？如果你聰明的話，應(yīng)該有了答案。我們來做一個(gè)試驗(yàn)，來印證一下你的想法。代碼如下：
Document
test1
test2
test3
好，我們可以看到我給test2加上了position: fixed;right: 20px;top: 20px;?它會(huì)相對(duì)于瀏覽器窗口定位，而test3作為test2的子元素，我們加上了position: absolute;left: -40px;top: 40px;那么，根據(jù)我們的想象，它應(yīng)該相對(duì)于test2作出偏移。那么是不是這個(gè)情況呢？我們來看一下效果圖：
如上圖所示，看到了具體的效果了吧！是不是和你想象的是一樣的呢？
(4)它的父元素的屬性是?position:absolute
好，我們來看一下，如果position:absolute嵌套position:absolute元素將會(huì)出現(xiàn)什么情況呢？
寫了這么多，其實(shí)你應(yīng)該有了一定的預(yù)見性了吧？好，我們來做試驗(yàn)，代碼如下：
Document
test1
test2
test3
如上所示，test2我們使用了position: absolute;right: 20px;top: 20px;參數(shù)，那么，它會(huì)相對(duì)于文檔作出設(shè)定的偏移值。而我們給test3使用了同樣的css樣式。如果test3也是相對(duì)于文檔定位的話，那么它和test2應(yīng)該是重疊的。
但是，我們根據(jù)上面的解釋，test3應(yīng)該相對(duì)于test2定位才對(duì)，那么是不是呢？我們看效果
如上圖所示，果然，test2相對(duì)于文檔偏移，而test3相對(duì)于test2偏移。
6.position 以及參數(shù)總結(jié)position: relative;不會(huì)脫離文檔流，position: fixed;position: absolute;會(huì)脫離文檔流
position: relative;?相對(duì)于自己在文檔流中的初始位置偏移定位。
position: fixed;?相對(duì)于瀏覽器窗口定位。
position: absolute;?是相對(duì)于父級(jí)非position:static?瀏覽器定位。
如果沒有任何一個(gè)父級(jí)元素是非position:static屬性，則會(huì)相對(duì)于文檔定位。
這里它的父級(jí)元素是包含爺爺級(jí)元素、祖爺爺級(jí)元素、祖宗十八代級(jí)元素的。任意一級(jí)都可以。
如果它的父級(jí)元素和爺爺級(jí)元素都是非position:static?屬性，則，它會(huì)選擇距離最近的父元素。
參考資料：
1.MDN：https://developer.mozilla.org...
相關(guān)文章推薦：CSS進(jìn)階指南
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115713.html
摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對(duì)布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對(duì) CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...
摘要：張鑫旭的深入理解之學(xué)習(xí)筆記基本屬性屬性介紹默認(rèn)當(dāng)與值相同時(shí)，等同于當(dāng)與值不相同時(shí)，其中一個(gè)值被賦予時(shí)，若另一個(gè)值為，那這個(gè)會(huì)被重置為作用前提元素非對(duì)應(yīng)方位的尺寸限制拉伸對(duì)于單元格等需要為狀態(tài)才可以與滾動(dòng)條頁面默認(rèn)滾動(dòng)條來自與無 《張鑫旭的CSS深入理解之overflow》學(xué)習(xí)筆記 overflow基本屬性 overflow屬性介紹 overflow: visible(默認(rèn))|hidd...
摘要：如圖所示代表，代表，代表。以上例子中，和之間的折疊產(chǎn)生的，是個(gè)相鄰折疊的結(jié)果。將其值分為兩組正值，，負(fù)值，，根據(jù)有正有負(fù)時(shí)的計(jì)算規(guī)則，正值的最大值為，負(fù)值中絕對(duì)值最大的是，所以，最終折疊后的應(yīng)該是。 盒模型的構(gòu)成 之前寫了一篇關(guān)于如何解決css的外邊距重疊問題,可是后來發(fā)現(xiàn),我有些本末倒置了,對(duì)于一個(gè)問題的正確的處理流程就應(yīng)該是先發(fā)現(xiàn)問題,分析問題,解決問題,所以我在這篇文章中就對(duì)下c...
摘要：是商湯科技發(fā)表于的一篇目標(biāo)檢測(cè)的論文，對(duì)架構(gòu)的目標(biāo)坐標(biāo)回歸部分進(jìn)行了替換，取得了更加較精確的定位精度，是最近非常值得一讀的論文。一作者信息該文所有作者均來自商湯科技該文直取網(wǎng)格修飾，意即將目標(biāo)檢測(cè)中位置定位轉(zhuǎn)化為目標(biāo)區(qū)域網(wǎng)格點(diǎn)的定位。 Grid R-CNN是商湯科技發(fā)表于arXiv的一篇目標(biāo)檢測(cè)的論文，對(duì)Faster R-CNN架構(gòu)的目標(biāo)坐標(biāo)回歸部分進(jìn)行了替換，取得了更加較精確的定位精度，是...
摘要：布局涉及到的屬性常用屬性值此元素不會(huì)被顯示它和屬性不一樣。當(dāng)所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認(rèn)的內(nèi)容高度浮動(dòng)塌陷配合使用屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。 @(CSS技巧)[CSS, 布局] 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性 一直感覺自己對(duì)CSS的各個(gè)屬性很了解，可是在前幾天一次面試后發(fā)現(xiàn)自己真的很多地方感覺自己知道，可是實(shí)際上自己并不是真的理解了...
閱讀 3712·2021-11-24 09:39
閱讀 1337·2021-09-30 09:48
閱讀 3330·2021-09-09 11:51
閱讀 2964·2021-09-08 10:41
閱讀 1377·2019-08-30 14:06
閱讀 2856·2019-08-30 14:01
閱讀 916·2019-08-29 17:11
閱讀 3219·2019-08-29 15:37
