對(duì)CSS中的Position、Float屬性的一些深入探討
我要評(píng)論本文主要探討點(diǎn)：
1.Position、Float屬性的基本使用方法
2.Position、Float屬性對(duì)元素所造成的影響
3.Position、Float屬性交叉使用上面的影響
4.Position、Float屬性使用上的小技巧
本文結(jié)構(gòu)點(diǎn)：
1.HTML布局的基本要點(diǎn)（點(diǎn)我直接跳轉(zhuǎn)）
盒子模型
HTML的普通流
2.Position屬性（點(diǎn)我直接跳轉(zhuǎn)）
屬性值介紹
用法介紹
一些關(guān)于position的小知識(shí)
3.Float屬性（點(diǎn)我直接跳轉(zhuǎn)）
屬性值介紹
用法介紹
與Position之間的兼容問(wèn)題
HTML布局的基本要點(diǎn)：
如果要掌握、運(yùn)用好Position、Float屬性必須要對(duì)HTML的兩個(gè)基本點(diǎn)有清晰的了解。
1.盒子模型（box model）
2.HTML的普通流（normal flow）
盒子模型
在HTML中元素的盒子模型分為兩種：塊狀元素、行內(nèi)元素，請(qǐng)注意這里的塊狀元素（Block）和行內(nèi)元素（Inline）與Display屬性中的inline、block兩個(gè)屬性值并不等同。盒子模型中的Inline、Block類(lèi)似于是Display屬性的父類(lèi)，例如：Display屬性中的list-item屬性值是屬于塊狀（Block）類(lèi)型的。
我們直觀的上看兩種盒子模型的區(qū)別
•塊狀（Block）類(lèi)型的元素可以設(shè)置width、height屬性，而行內(nèi)（Inline）類(lèi)型設(shè)置無(wú)效。
•塊狀（Block）類(lèi)型的元素會(huì)獨(dú)占一行（直觀的說(shuō)就是會(huì)換行顯示，無(wú)法與其他元素在同一行內(nèi)顯示，除非你主動(dòng)修改元素的樣式），而行內(nèi)（Inline）類(lèi)型的元素則都會(huì)在一行內(nèi)顯示。
•塊狀（Block）類(lèi)型的元素的width默認(rèn)為100%，而行內(nèi)（Inline）類(lèi)型的元素則是根據(jù)自身的內(nèi)容及子元素來(lái)決定寬度。
列舉出一些大家常見(jiàn)的元素的分類(lèi)
•塊狀元素：P、DIV、UL、LI、DD、DT...
•行內(nèi)元素：A、IMG、SPAN、STRONG...
HTML的普通流
瀏覽器在讀取HTML源代碼的時(shí)候是根據(jù)元素在代碼出現(xiàn)的順序讀取，最終元素的呈現(xiàn)方式是依據(jù)元素的盒子模型來(lái)決定的。行內(nèi)元素是從左到右，塊狀元素是從上到下。（如下圖）
<style type="text/css">
div { width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
strong { background: #808080; }
em { background: #ffd800; }
span { background: #b6ff00; }
</style>
<strong>strong</strong><em>em</em><span>span</span>
<div style="background: blue">A</div>
<div style="background: red">B</div>
<div style="background: green">C</div>
如果你不改變?cè)氐哪J(rèn)樣式前提下，元素在HTML的普通流中會(huì)“占用”一個(gè)位置，而“占用”位置的大小、位置則是由元素的盒子模型來(lái)決定。因此，在后續(xù)講的Position、Float屬性是否會(huì)使元素脫離這個(gè)普通流是一個(gè)關(guān)鍵點(diǎn)。
Position屬性：
我們首先來(lái)談?wù)凱osition屬性，因?yàn)镻osition屬性能夠很好的體現(xiàn)HTML普通流這個(gè)特征。重點(diǎn)在于應(yīng)用了不同的position值之后是否有脫離普通流和改變Display屬性這兩點(diǎn)。
Position屬性值
Position的屬性值共有四個(gè)static、relative、absolute、fixed。
Static
所有元素在默認(rèn)的情況下position屬性均為static，而我們?cè)诓季稚辖?jīng)常會(huì)用到的相對(duì)定位和絕對(duì)定位常用的屬性top、bottom、left、right在position為static的情況下無(wú)效。其用法為：在改變了元素的position屬性后可以將元素重置為static讓其回歸到頁(yè)面默認(rèn)的普通流中。
Relative
俗稱(chēng)的相對(duì)定位，重點(diǎn)在于對(duì)相對(duì)理解。我們此前說(shuō)過(guò)每個(gè)元素在頁(yè)面的普通流中會(huì)有“占用”一個(gè)位置，這個(gè)位置可以理解為默認(rèn)位置，而相對(duì)定位就是將元素偏離元素的默認(rèn)位置，但普通流中依然保持著原有的默認(rèn)位置，并沒(méi)有脫離普通流，只是視覺(jué)上發(fā)生的偏移。
我們先用塊狀元素來(lái)做個(gè)示例：
<style type="text/css">
div{ width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
</style>
<div style="background: blue">A</div>
<div style="background: red; position: relative; top: 20px; left: 20px;">B</div>
<div style="background: green">C</div>
右圖中的黑色虛線部分為元素B的默認(rèn)普通流位置，而黃色線則代表元素B的相對(duì)偏移量。我們可以很明顯的看出在元素C依然還是保留在原位，并沒(méi)有因?yàn)樵谺發(fā)生了偏移而隨之變化。
我們?cè)賮?lái)看看行內(nèi)元素（在這里用大家最常用的span來(lái)做示例）
<style type="text/css">
strong { background: #808080; }
em { background: #ffd800; }
span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }
</style>
<strong>strong</strong><em>em</em><span>span</span>
請(qǐng)注意看，在這里我是有對(duì)span進(jìn)行width屬性的賦值（為100px）。但是我們可以看到span在運(yùn)用了relative這個(gè)position屬性值后，依然對(duì)width屬性無(wú)效，換而言之，position: relative并沒(méi)有改變行內(nèi)元素的Display屬性，這個(gè)概念非常重要（注意與接下來(lái)的absolute的區(qū)別）。
Absolute
俗稱(chēng)的絕對(duì)定位，絕對(duì)定位是相對(duì)而言的，怎么理解呢？應(yīng)用了position: absolute的元素會(huì)循著節(jié)點(diǎn)樹(shù)中的父（祖）元素來(lái)確定“根”，然后相對(duì)這個(gè)“根”元素來(lái)偏移。如果在其節(jié)點(diǎn)樹(shù)中所有父（祖）元素都沒(méi)有設(shè)置position屬性值為relative或者absolute則該元素最終將對(duì)body進(jìn)行位置偏移。應(yīng)用了position: absolute的元素會(huì)脫離頁(yè)面中的普通流并改變Display屬性（重點(diǎn)）！
我們先用一個(gè)默認(rèn)嵌套的DIV來(lái)做示例
<body style="background: yellow;">
<div style="background: #fff">
A
<div style="background: #81b6ff">
A - 1
<div style="background: #b6ff00;">
A - 2
</div>
</div>
</div>
</body>
現(xiàn)在我們對(duì)A-2這個(gè)div設(shè)置絕對(duì)定位(Top: 0, Left: 0)，而沒(méi)有對(duì)它的父元素（A、A-1）設(shè)置任何的position值
<body style="background: yellow;">
<div style="background: #fff">A
<div style="background: #81b6ff">A - 1
<div style="background: #b6ff00; position: absolute; top: 0; left: 0;">
A - 2</div></div></div></body>
可以看到（A-2）最終是根據(jù)body來(lái)產(chǎn)生了位移，讓我們對(duì)比分別設(shè)置一下父元素position。
從上面的圖，我們可以總結(jié)以下幾個(gè)結(jié)論。
1）塊狀元素在position(relative/static)的情況下width為100%，但是設(shè)置了position: absolute之后，會(huì)將width變成auto（會(huì)受到父元素的寬度影響）。
2）元素設(shè)置了position: absolute之后，如果沒(méi)有設(shè)置top、bottom、left、right屬性的話，瀏覽器會(huì)默認(rèn)設(shè)置成auto，而auto的值則是該元素的“默認(rèn)位置”。即設(shè)置position: absolute前后的offsetTop和offsetLeft屬性值不變。
特殊情況：
Firefox的話會(huì)直接將top、left設(shè)置成offsetTop和offsetLeft的值而非auto。
IE7下的表現(xiàn)更類(lèi)似于float，會(huì)附加到父元素的末尾。
一些的position小知識(shí)
1）應(yīng)用了position: relative/absolute的元素，margin屬性仍然有效，以position:relative來(lái)舉例。如果設(shè)置了left、top、bottom、right的屬性，建議大家不要設(shè)置margin數(shù)據(jù)，因?yàn)楹茈y精確元素的定位，盡量減少干擾因素。
2）position: absolute忽略根元素的padding。
<div id="a" style="background: #fff; width: 200px;">A
<div id="b" style="background: #81b6ff; width: 150px; position: relative; padding-top: 100px;">A - 1
<div id="c" style="background: #b6ff00; position: absolute; left: 0; top: 0">A - 2
</div>
</div>
</div>
3）在IE6/7中設(shè)置position屬性后會(huì)導(dǎo)致z-index屬性失效
<!-- 解決方案，父元素設(shè)置一個(gè)更大的z-index值即可 -->
<div style="z-index: 2;">
a
<div style="position: relative; z-index: 1;">
b
</div>
</div>
4）行內(nèi)元素在應(yīng)用了position：absolute之后會(huì)改變display。
<span style="position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; background: #fff;">
我的display屬性由inline變成了block
</span>
因此，要注意到relative是并沒(méi)有改變行內(nèi)元素的呈現(xiàn)模式，而absolute是會(huì)改變行內(nèi)元素的呈現(xiàn)模式，如果設(shè)置了absolute并不需要顯式的的將元素display改成block。
5）應(yīng)用了position: absolute / relative之后，會(huì)覆蓋其他非定位元素（即position為static的元素），如果你不想覆蓋到其他元素，也可以將z-index設(shè)置成-1。
Fixed
在很長(zhǎng)的時(shí)間里，這個(gè)屬性值因?yàn)榧嫒菪詥?wèn)題，并沒(méi)有得到非常廣泛的應(yīng)用（IE6未實(shí)現(xiàn)該屬性值）。fixed和absolute有很多共同點(diǎn)：
- 會(huì)改變行內(nèi)元素的呈現(xiàn)模式，使display之變更為block。會(huì)讓元素脫離普通流，不占據(jù)空間。默認(rèn)會(huì)覆蓋到非定位元素上。
fixed與absolute最大的區(qū)別在于：absolute的”根元素“是可以被設(shè)置的，而fixed則其”根元素“固定為瀏覽器窗口。即當(dāng)你滾動(dòng)網(wǎng)頁(yè)，其元素與瀏覽器窗口之間的距離是恒定不變的。
Float屬性
float的屬性值有none、left、right，有幾個(gè)要點(diǎn)：
只有橫向浮動(dòng)，并沒(méi)有縱向浮動(dòng)。當(dāng)元素應(yīng)用了float屬性后，將會(huì)脫離普通流，其容器（父）元素將得不到脫離普通流的子元素高度。
會(huì)將元素的display屬性變更為block。
浮動(dòng)元素的后一個(gè)元素會(huì)圍繞著浮動(dòng)元素（典型運(yùn)用是文字圍繞圖片），與應(yīng)用了position的元素相比浮動(dòng)元素并不會(huì)遮蓋后一個(gè)元素。浮動(dòng)元素的前一個(gè)元素不會(huì)受到任何影響（如果你想讓兩個(gè)塊狀元素并排顯示，必須讓兩個(gè)塊狀元素都應(yīng)用float）。
與position的兼容性問(wèn)題
1）元素同時(shí)應(yīng)用了position: relative、float、（top / left / bottom / right）屬性后，則元素先浮動(dòng)到相應(yīng)的位置，然后再根據(jù)（top / left / bottom / right）所設(shè)置的距離來(lái)發(fā)生偏移。
<div style="position:relative; float:right; left:50px; top:10px;">div</div>
左圖中的div是沒(méi)有設(shè)置top、left值的，而右邊則設(shè)置了50px的偏移。
2）元素同時(shí)應(yīng)用了position: absolute及float屬性，則float失效。
<div style="position: absolute; right:10px; top: 10px; float: left;">我是一個(gè)應(yīng)用了position：absolute和float：left的DIV，不過(guò)我還是在瀏覽器的右邊，沒(méi)有浮動(dòng)到左邊。</div>
3）第一個(gè)元素應(yīng)用了position之后會(huì)覆蓋著接下來(lái)的float元素（如果兩個(gè)元素所處的位置相同）
<div style="position: absolute; left:10px; top: 10px;"> 我是一個(gè)應(yīng)用了position：absolute的DIV。</div><div style="float:left; background: red; width: 300px; height: 150px; "> 我是float：left的DIV</div>
回顧：如果你不將float的元素的position設(shè)置成relative的話，你想通過(guò)設(shè)置float元素的z-index來(lái)的達(dá)到覆蓋position:absolute是無(wú)效的。同理，float元素下面存在position: absolute的子元素，如果你不將float的元素的position設(shè)置成relative的話，absolute元素是不會(huì)定位到float元素的。
4）同時(shí)應(yīng)用position: absolute和float: left會(huì)導(dǎo)致清除浮動(dòng)無(wú)效（position: relative則可以清除浮動(dòng)）。
常用的清除浮動(dòng)的方法有兩種：
- 通過(guò)在容器中添加一個(gè)標(biāo)簽，設(shè)置該標(biāo)簽的樣式為 clear: both容器設(shè)置overflow: hidden
<div style="background: #fff; width: 100%; overflow: hidden;"> <div style="float: left; position: absolute;">我是DIV</div> <div style="clear: both;"></div><div>
相關(guān)文章
- 這篇文章主要針對(duì)CSS定位position的常用技法進(jìn)行探究，CSS中的position等屬性確實(shí)有很多需要認(rèn)真考究的地方，本文就和大家一起探索一下2016-04-26
- 本文針對(duì)CSS浮動(dòng)float、定位position進(jìn)行學(xué)習(xí)理解，通過(guò)實(shí)例幫助大家掌握CSS浮動(dòng)float、定位position技巧，感興趣的小伙伴們可以參考一下2016-04-21
- 這篇文章主要介紹了CSS的position屬性的完全解析,包括position和overflow在一些相似使用方面的對(duì)比,需要的朋友可以參考下2015-11-06
- 這篇文章主要介紹了舉例詳解CSS中position屬性的使用,是CSS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-09-06
- positon有4個(gè)屬性:static relative absolute fixed，我們都知道absolute是絕對(duì)定位，relative是相對(duì)定位，但是這個(gè)絕對(duì)與相對(duì)是什么意思呢？絕對(duì)是什么地方的絕對(duì)，相對(duì)又2014-11-28
- position屬性主要有四種屬性值，任何元素的默認(rèn)position的屬性值均是static,靜態(tài)。這節(jié)課主要講講relative以及absolute，感興趣的朋友可以了解下2013-12-09
css中關(guān)于定位屬性position為fixed的使用記載
當(dāng)一個(gè)div想要定位時(shí)，我們第一反應(yīng)是position屬性，而position屬性除了默認(rèn)值外，還有absolute,relative和fixed，下面有個(gè)不錯(cuò)的示例，不懂的朋友可以參考下2013-11-11CSS中的position:relative;的作用示例介紹
CSS中的position:relative是控制元素相對(duì)定位的，relative 不脫離文檔流而absolute 脫離文檔流，relative 的元素盡管表面上看到它偏離了原來(lái)的位置，但它實(shí)際上在文檔流中2013-11-05css background-position 用法詳細(xì)圖文介紹
css background-position背景定位屬性想必從事前端開(kāi)發(fā)的朋友并不陌生吧，這個(gè)屬性很實(shí)用的利用它可以實(shí)現(xiàn)很多的圖片樣式效果，下面是其具體的使用方法，感興趣的朋友不要2013-11-04- POSITION屬性用來(lái)決定元素在頁(yè)面上的位置，其定位屬性有多個(gè)，下面一一為大家介紹下，希望大家在使用過(guò)程中可以用到2013-09-09