CSS的position屬性完全解析

發(fā)布時(shí)間：2015-11-06 11:52:04 作者：佚名

這篇文章主要介紹了CSS的position屬性的完全解析,包括position和overflow在一些相似使用方面的對(duì)比,需要的朋友可以參考下

一、定位基本原理

對(duì)于前端開發(fā)工程師來(lái)說(shuō)，編寫CSS是前端開發(fā)工作中必不可少的一個(gè)內(nèi)容，在CSS中的position屬性又是非常重要的一個(gè)方面。顧名思義，所謂position，即是對(duì)HTML元素定位方式的一種設(shè)置。它是CSS定位技術(shù)的基石，看似很容易學(xué)習(xí)，很多的前端工程師也會(huì)說(shuō)自己掌握得很好，但事實(shí)上是這樣嗎？作為一個(gè)在前端開發(fā)的道路上慢慢前行的新人，我不敢這么說(shuō)，那么就通過(guò)這篇文章與大家一起，了解position的奧秘。

首先，既然是CSS中的屬性之一，那么我們就有必要研究一下W3C的CSS文檔，畢竟這才是對(duì)此屬性說(shuō)明最為詳細(xì)的地方。在這里要插一句，目前市面上充斥著大量的教學(xué)書籍，網(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ì)相鄰元素的定位沒有任何影響，相互之間的層疊關(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)方式則沒有定義。不過(guò)，如果希望一個(gè)box在屏幕和印刷媒體上的表現(xiàn)不同的話，可以使用@media rule的方式，例如：

CSS Code復(fù)制內(nèi)容到剪貼板

@media screen {
h1#first { position: fixed; }
}
@media print {
h1#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)容到剪貼板

<input type="text" />

這是一個(gè)文本輸入框，換成其他的屬性的話，瀏覽器的顯示就會(huì)不一樣。

替換元素的例子：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<p>I'm classicemi</p>

(X)HTML的大多數(shù)元素都是非替換元素，他們將內(nèi)容直接告訴瀏覽器，瀏覽器再顯示出來(lái)。

下面回到auto上來(lái)，對(duì)于非替換元素，auto值的效果取決于哪些相關(guān)的屬性同樣具有auto值，比較難理解是嗎，好的，我們給出下面的例子：

CSS Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>
<html>
<head>
<title>A frame document with CSS 2.1</title>
<style type="text/css" media="screen">
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;
}
</style>
</head>
<body>
<div id="header"> ... </div>
<div id="sidebar"> ... </div>
<div id="main"> ... </div>
<div id="footer"> ... </div>
</body>
</html>

在瀏覽器中顯示的布局大致是：
2015116115245285.png (221×253)

代碼中，使用了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)，這里我覺得沒有什么翻譯成中文的必要了，因?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)容到剪貼板

<!DOCTYPE html>
<html>
<head>
<title>BFC</title>
<meta charset="utf-8" />
</head>
<body>
<div style="width: 400px; height: 300px; background: blue;">
<div style="width: 200px; height: 100px; background: red;"></div>
<div style="width: 100px; height: 150px; background: green;"></div>
</div>
</body>
</html>

2015116115306153.png (408×311)

但是，當(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)容到剪貼板

<!DOCTYPE html>
<html>
<head>
<title>IFC</title>
<meta charset="utf-8" />
</head>
<body>
<div style="width: 400px; height: 300px; background: blue; overflow: visible;">
<span style="font-size: 20px;">Something</span>
<div style="display: inline-block; width: 200px; height: 100px; background: red;"></div>
</div>
</body>
</html>

2015116115323645.png (407×310)

注意觀察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)容到剪貼板

<!DOCTYPE html>
<html>
<head>
<title>Vertical-align</title>
<meta charset="utf-8" />
</head>
<body>
<p style="background: grey; width: 600px;">
<span style="font-size: 50px; border: 1px solid red;">hello</span>
<span style="font-size: 30px; border: 1px solid green; vertical-align: top;">world</span>
</p>
</body>
</html>

2015116115339723.png (608×62)

在水平方向上的對(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)沒有設(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ì)影響它