這篇文章主要介紹“CSS的position屬性的詳細(xì)介紹”，在日常操作中，相信很多人在CSS的position屬性的詳細(xì)介紹問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS的position屬性的詳細(xì)介紹”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比伊金霍洛網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式伊金霍洛網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋伊金霍洛地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。
一、定位基本原理
對(duì)于前端開(kāi)發(fā)工程師來(lái)說(shuō)，編寫(xiě)CSS是前端開(kāi)發(fā)工作中必不可少的一個(gè)內(nèi)容，在CSS中的position屬性又是非常重要的一個(gè)方面。顧名思義，所謂position，即是對(duì)HTML元素定位方式的一種設(shè)置。它是CSS定位技術(shù)的基石，看似很容易學(xué)習(xí)，很多的前端工程師也會(huì)說(shuō)自己掌握得很好，但事實(shí)上是這樣嗎？作為一個(gè)在前端開(kāi)發(fā)的道路上慢慢前行的新人，我不敢這么說(shuō)，那么就通過(guò)這篇文章與大家一起，了解position的奧秘。
首先，既然是CSS中的屬性之一，那么我們就有必要研究一下W3C的CSS文檔，畢竟這才是對(duì)此屬性說(shuō)明最為詳細(xì)的地方。在這里要插一句，目前市面上充斥著大量的教學(xué)書(shū)籍，網(wǎng)絡(luò)上也有很多相關(guān)的學(xué)習(xí)資源，其中固然不乏精品，但是會(huì)花點(diǎn)時(shí)間，認(rèn)真閱讀官方文檔的又有多少人呢，有的時(shí)候，最乏味的往往是最準(zhǔn)確的。
好了，話不多說(shuō)，官方文檔中關(guān)于position屬性的內(nèi)容大致是這樣的：
In CSS 2.1, a box may be laid out according to three positioning schemes:
1、Normal flow
2、Floats
3、Absolute positioning
1. 常規(guī)文檔流。包括塊級(jí)元素排版，行內(nèi)元素排版以及對(duì)塊級(jí)元素和行內(nèi)元素相對(duì)位置的排版。
2. 浮動(dòng)。在浮動(dòng)模型中，元素先按照正常文檔流定位，然后從文檔流中移出，根據(jù)設(shè)置向左或者向右盡可能地移動(dòng)。
3. 絕對(duì)定位。元素會(huì)完全從文檔流中移出，再根據(jù)父元素進(jìn)行定位。
一個(gè)元素如果是根元素，或者有浮動(dòng)或絕對(duì)定位的話，那它就是在常規(guī)文檔流之外的，其他情況都是在文檔流之內(nèi)。文檔中有這么一句：The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A. 有些繞，以我并不深厚的英語(yǔ)能力來(lái)翻譯的話，應(yīng)該是：元素A的flow是由元素A本身以及所有最近的文檔流之外的父元素是A的流內(nèi)元素所組成的。（翻譯得太慘不忍睹了，求大神指點(diǎn)o(>﹏<)o）。
二、position屬性詳解
在CSS 2.1中，元素的定位方式是由position和display屬性共同作用所決定的，我們先來(lái)看position屬性
position屬性的可取值：static | relative | absolute | fixed | inherit
默認(rèn)值：static
每個(gè)值的意義：
static: 常規(guī)方式定位box，此時(shí)設(shè)置top, right, bottom, left屬性是無(wú)效的。
relative: 元素本身的的位置的定位方式和static是一樣的，但是實(shí)際位置會(huì)相對(duì)于原位置有所偏移，是通過(guò)top, right, bottom, left的設(shè)置實(shí)現(xiàn)的。注意：display設(shè)置為table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell和table-caption的元素是無(wú)法應(yīng)用position: relative的，這也很好理解，這些表格類元素如果會(huì)相對(duì)于正常位置偏移的話不是很奇怪么！
absolute: 元素脫離文檔流，“幾乎”獨(dú)立了。位置通過(guò)top, right, bottom, left來(lái)設(shè)置，當(dāng)然，參照基點(diǎn)是包含元素的父元素~絕對(duì)定位的元素對(duì)相鄰元素的定位沒(méi)有任何影響，相互之間的層疊關(guān)系是通過(guò)z-index來(lái)設(shè)置的，同時(shí)，絕對(duì)定位元素的margin之間也不會(huì)發(fā)生折疊。
fixed: 這是個(gè)比較有趣的值。它的定位計(jì)算方式和絕對(duì)定位是一樣的，但是也有不同。元素的位置一旦確定了，在屏幕顯示器上，它會(huì)保持固定不動(dòng)，在印刷媒體類型上，它會(huì)在每頁(yè)出現(xiàn)在固定位置，在其他的媒體類型上，表現(xiàn)方式則沒(méi)有定義。不過(guò)，如果希望一個(gè)box在屏幕和印刷媒體上的表現(xiàn)不同的話，可以使用@media rule的方式，例如：
CSS Code復(fù)制內(nèi)容到剪貼板
@media screen {
h2#first { position: fixed; }
}
@media print {
h2#first { position: static; }
}
還有一個(gè)inherit值，不用多說(shuō)，就是從父元素繼承position值了。
三、定位方式：top, right, bottom, left
這四個(gè)屬性其實(shí)可以放在一塊兒說(shuō)，其實(shí)是差不多的，只是定位的相對(duì)基線變了而已。文檔上的說(shuō)明有些啰嗦了，不過(guò)that's what official document is對(duì)吧？
可設(shè)定的值為：length, percentage, auto, inherit
不論設(shè)定的值為什么，意義都是元素的上右下左距離父元素的上右下左的邊距。
這里要提一下auto值，對(duì)于非替換元素(non-replaced elements)和替換元素(replaced elements)auto的表現(xiàn)是不一樣的，非替換元素指的是瀏覽器根據(jù)標(biāo)簽的元素和屬性來(lái)判斷具體顯示的內(nèi)容，如：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
這是一個(gè)文本輸入框，換成其他的屬性的話，瀏覽器的顯示就會(huì)不一樣。
替換元素的例子：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
I'm classicemi
(X)HTML的大多數(shù)元素都是非替換元素，他們將內(nèi)容直接告訴瀏覽器，瀏覽器再顯示出來(lái)。
下面回到auto上來(lái)，對(duì)于非替換元素，auto值的效果取決于哪些相關(guān)的屬性同樣具有auto值，比較難理解是嗎，好的，我們給出下面的例子：
CSS Code復(fù)制內(nèi)容到剪貼板
body { height: 8.5in }
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
rightright: 0;
bottombottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
rightright: auto;
bottombottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
rightright: 0;
bottombottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
rightright: 0;
bottombottom: 0;
left: 0;
}
在瀏覽器中顯示的布局大致是：
代碼中，使用了auto的屬性有: #header bottom, #sidebar right, #footer top. 而對(duì)于#main呢，它的height和width都是auto，也就是說(shuō)main的長(zhǎng)寬是自適應(yīng)的，自動(dòng)填充可用空間，這也就好理解了，所謂的auto，也就是使元素的上右下左距離能夠根據(jù)相關(guān)聯(lián)的，或者說(shuō)共同父元素的子元素之間的關(guān)系自動(dòng)調(diào)整。
四、Normal Flow
前面提到了很多次“常規(guī)文檔流”，實(shí)際上也就是W3C文檔中的Normal Flow，也可稱為常規(guī)流。常規(guī)流的理解，主要圍繞著兩個(gè)方面，分別是格式化上下文(Formatting Context)和相對(duì)定位(Relative Positioning)。
格式化上下文，按照W3C文檔的解釋，分為Block Formatting Contexts(BFC)和Inline Farmatting Contexts(IFC)，這里我覺(jué)得沒(méi)有什么翻譯成中文的必要了，因?yàn)槿绻艺f(shuō)“塊級(jí)格式化上下文”的話，諸位能理解是什么意思嗎，所以，叫BFC和IFC就挺好。
所謂BFC，文檔上解釋得挺啰嗦，簡(jiǎn)單來(lái)說(shuō)，就是塊級(jí)box順次垂直排列。當(dāng)然也不能這么簡(jiǎn)單，原因是塊級(jí)box的內(nèi)部還會(huì)產(chǎn)生BFC，也就是說(shuō)可以嵌套。
CSS Code復(fù)制內(nèi)容到剪貼板
但是，當(dāng)塊級(jí)box內(nèi)部都是行內(nèi)box的時(shí)候，就不會(huì)產(chǎn)生BFC，而是產(chǎn)生IFC，但只要子元素中有一個(gè)塊級(jí)box，就會(huì)產(chǎn)生BFC。Attention! 文檔中指出，如果外層塊級(jí)box的overflow: visible; 的話，不會(huì)產(chǎn)生BFC甚至IFC。
下面來(lái)看看IFC，IFC中包括文字以及行內(nèi)元素，對(duì)于文字來(lái)說(shuō)，排版實(shí)際上有很多名堂，尤其是對(duì)于英文字符，或者說(shuō)字母類文本，如果各位對(duì)文字排版有興趣的話，推薦各位一部視頻教程，由美國(guó)著名IT教學(xué)網(wǎng)站lynda.com出品的網(wǎng)頁(yè)設(shè)計(jì)排版視頻教程《Typography.for.Web.Designers》，至于下載方法，這里就不多說(shuō)了，相信大家各顯神通都有辦法。
如果在行內(nèi)元素中同時(shí)包含文字的話，情況會(huì)比較復(fù)雜：
CSS Code復(fù)制內(nèi)容到剪貼板
注意觀察span和div的底部對(duì)齊差異。
行內(nèi)框在行框垂直方向的對(duì)齊：
行框高度總是足夠包含其容納的所有框，它可能會(huì)高于它包含的最高的框。在這里會(huì)跟vertical-align屬性相關(guān)：
vertical-align可能的取值：
baseline、sub、super、top、text-top、middle、bottom、text-bottom、length、%、inherit
舉一個(gè)例子：
CSS Code復(fù)制內(nèi)容到剪貼板
在水平方向上的對(duì)齊：
行內(nèi)框?qū)挾瓤偤托∮诎虻膶挄r(shí)，水平方向的對(duì)齊取決于text-align屬性。
五、POSITION和OVERFLOW的關(guān)系
父節(jié)點(diǎn)設(shè)置overflow:scroll,但是不管滾動(dòng)條如果滾動(dòng)，但是子節(jié)點(diǎn)一直都不動(dòng)。
當(dāng)父節(jié)點(diǎn)不設(shè)置position情況下，子節(jié)點(diǎn)position的四種值的分析：
示例1.1:
CSS Code復(fù)制內(nèi)容到剪貼板
body{
A {overflow: scroll;}
A-1 {}
}
效果：A-1會(huì)根據(jù)A滾動(dòng)條的滾動(dòng)而滾動(dòng)
分析：A-1的默認(rèn)position設(shè)置為static，當(dāng)position為static時(shí)，A-1元素還是遵循正常的文檔流，因此A-1會(huì)受它父節(jié)點(diǎn)屬性的影響
示例1.2:
CSS Code復(fù)制內(nèi)容到剪貼板
body{
A {overflow: scroll;}
A-1 {position: relative;}
}
效果：A-1會(huì)根據(jù)A滾動(dòng)條的滾動(dòng)而滾動(dòng)
分析：當(dāng)A-1的position設(shè)置為relative時(shí)，A-1元素還是遵循正常的文檔流，因此A-1會(huì)受它父節(jié)點(diǎn)屬性的影響
示例1.3:(重點(diǎn))
CSS Code復(fù)制內(nèi)容到剪貼板
body{
A {overflow: scroll;}
A-1 {position: absolute;}
}
效果：A-1不會(huì)根據(jù)A滾動(dòng)條的滾動(dòng)而滾動(dòng)
分析：當(dāng)A-1的position設(shè)置為absolute時(shí)，A-1元素脫離了文檔流，所以A-1不再受父節(jié)點(diǎn)屬性的影響
注意：這時(shí)在父節(jié)點(diǎn)沒(méi)有設(shè)置position的時(shí)，只會(huì)受到body節(jié)點(diǎn)的影響
示例1.4:
CSS Code復(fù)制內(nèi)容到剪貼板
body{
A {overflow: scroll;}
A-1 {position: fixed;}
}
效果：A-1不會(huì)根據(jù)A滾動(dòng)條的滾動(dòng)而滾動(dòng)
分析：當(dāng)A-1的position設(shè)置為fixed時(shí)，A-1元素脫離了文檔流，這時(shí)A-1只受body元素的影響
當(dāng)父節(jié)點(diǎn)設(shè)置position值為非static情況下，子節(jié)點(diǎn)position的四種值的分析：
示例2.1:
CSS Code復(fù)制內(nèi)容到剪貼板
body{
A {position：relative; overflow: scroll;}
A-1 {}
}
效果：A-1會(huì)根據(jù)A滾動(dòng)條的滾動(dòng)而滾動(dòng)
分析：跟示例1.1一樣，當(dāng)父節(jié)點(diǎn)A設(shè)置了position之后，子節(jié)點(diǎn)A-1還是遵循正常的文檔流，因此A-1會(huì)受它父節(jié)點(diǎn)屬性的影響
示例2.2:
CSS Code復(fù)制內(nèi)容到剪貼板
body{
A {position：relative; overflow: scroll;}
A-1 {position: relative;}
}
效果：A-1會(huì)根據(jù)A滾動(dòng)條的滾動(dòng)而滾動(dòng)
分析：跟示例1.2一樣，當(dāng)父節(jié)點(diǎn)A設(shè)置了position之后，子節(jié)點(diǎn)A-1還是遵循正常的文檔流，因此A-1會(huì)受它父節(jié)點(diǎn)屬性的影響
示例2.3:(重點(diǎn), 注意跟1.3示例對(duì)比)
CSS Code復(fù)制內(nèi)容到剪貼板
body{
A {position：relative; overflow: scroll;}
A-1 {position: absolute;}
}
效果：A-1會(huì)根據(jù)A滾動(dòng)條的滾動(dòng)而滾動(dòng)
分析：當(dāng)父節(jié)點(diǎn)A設(shè)置了position之后，效果就跟示例1.3不一樣了，這時(shí)A-1會(huì)受到離它自己最近的一個(gè)設(shè)置了position屬性的父節(jié)點(diǎn)的影響，再看下面一個(gè)示例：
CSS Code復(fù)制內(nèi)容到剪貼板
body{
A {position：relative; overflow: hidden;}
A-1 {overflow: scroll;}
A-1-1 {position: absolute;}
}
注意：這時(shí)A-1-1不會(huì)收A-1的影響，但是會(huì)受到A的影響
示例2.4:
CSS Code復(fù)制內(nèi)容到剪貼板
body{
A {position:relative; overflow: scroll;}
A-1 {position: fixed;}
}
效果：A-1不會(huì)根據(jù)A滾動(dòng)條的滾動(dòng)而滾動(dòng)
分析：跟1.4示例一樣，當(dāng)子節(jié)點(diǎn)的position屬性設(shè)置為fixed之后，不管的父節(jié)點(diǎn)是否設(shè)置了position值，都只會(huì)受到body節(jié)點(diǎn)的影響，其他任何節(jié)點(diǎn)都不會(huì)影響它
到此，關(guān)于“CSS的position屬性的詳細(xì)介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
重慶分公司
重慶分公司
