HTML之position:absolute relative static fixed的区别和理解
HTML之position:absolute relative static fixed的區(qū)別
在理解position:absolute relative static fixed的區(qū)別時(shí)，我們先需要清楚什么是文檔流。
一、文檔流：將窗體自上而下分成一行一行,并在每行中按從左至右的挨次排放元素,即為文檔流。
每個(gè)非浮動(dòng)塊級(jí)元素都獨(dú)有一行, 浮動(dòng)元素則按規(guī)則浮在行的一端. 若當(dāng)時(shí)行容不下, 則另起新行再浮動(dòng)。內(nèi)聯(lián)元素也不會(huì)獨(dú)有一行. 一切元素(包括塊級(jí),內(nèi)聯(lián)和列表元素)均可生成子行, 用于擺放子元素。有三種狀況將使得元素離開文檔流而存在,分別是浮動(dòng)、絕對(duì)定位、固定定位.
然則在IE中浮動(dòng)元素也存在于文檔流中，浮動(dòng)元素不占任何正常文檔流空間，而浮動(dòng)元素的定位照樣基于正常的文檔流，然后從文檔流中抽出并盡能夠遠(yuǎn)的挪動(dòng)至左側(cè)或許右側(cè)。當(dāng)一個(gè)元素脫離正常文檔流后，依然在文檔流中的其他元素將忽略該元素并填補(bǔ)其原先的空間。?
基于文檔流，理解以下的定位形式:
相對(duì)定位：元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
絕對(duì)定位：即完全離開文檔流, 相關(guān)于position屬性非static值的比來(lái)父級(jí)元素進(jìn)行偏移。
固定定位：即完全離開文檔流，相關(guān)于視區(qū)進(jìn)行偏移。
文檔流是文檔中可顯示對(duì)象在排列時(shí)所占用的位置。比如網(wǎng)頁(yè)的div標(biāo)簽它默認(rèn)占用的寬度位置是一整行，p標(biāo)簽?zāi)J(rèn)占用寬度也是一整行，因?yàn)閐iv標(biāo)簽和p標(biāo)簽是塊狀對(duì)象。
網(wǎng)頁(yè)中大部分對(duì)象默認(rèn)是占用文檔流，也有一些對(duì)象是不占文檔流的，比如表單中隱藏域。當(dāng)然我們也可以讓占用文檔流的元素轉(zhuǎn)換成不占文檔流，這就要用到CSS中屬性position來(lái)控制。
二、CSS 2.0對(duì)position的定義：檢索對(duì)象的定位方式。共有4種取值。
absolute：絕對(duì)定位。將對(duì)象從文檔流中拖出，使用left，right，top，bottom等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位。如果不存在這樣的父對(duì)象，則依據(jù)body對(duì)象。而其層疊通過(guò)z-index屬性定義
。當(dāng)對(duì)象定位在瀏覽器窗口以外，瀏覽器因此顯示滾動(dòng)條。
fixed：固定定位。對(duì)象定位遵從絕對(duì)(absolute)方式。但是要遵守一些規(guī)范。當(dāng)對(duì)象定位在瀏覽器窗口以外，瀏覽器不會(huì)因此顯示滾動(dòng)條，而當(dāng)滾動(dòng)條滾動(dòng)時(shí)，對(duì)象始終固定在原來(lái)位置。
relative：相對(duì)定位。對(duì)象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置。當(dāng)對(duì)象定位在瀏覽器窗口以外，瀏覽器因此顯示滾動(dòng)條。?
static：元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。
inherit：繼承值，對(duì)象將繼承其父對(duì)象相應(yīng)的值。
所有的塊元素在html文檔中是按照它們出現(xiàn)在文檔中的先后順序排列的（當(dāng)然，嵌套不在此列），每一個(gè)塊都會(huì)另起一行。如下圖
他們對(duì)應(yīng)的html如下：?
???在文檔流中，每個(gè)塊元素都會(huì)被安排到流中的一個(gè)位置，我們可以通過(guò)CSS中的定位屬性來(lái)重新安排它的位置。定位分為相對(duì)定位和絕對(duì)定位， 相對(duì)定位是相對(duì)于該塊元素在文檔流中的位置的，比如，我們可以使用相對(duì)定位把div2放到div1的右側(cè)，CSS代碼如下：?
?? 可以看到一個(gè)有趣的現(xiàn)象，那就是雖然我們把div2移走了，但是div1和div3中間還是有一個(gè)空間， 說(shuō)明相對(duì)定位的元素是會(huì)占據(jù)文檔流空間的，這里的div2就是典型的“站著茅坑不拉屎”。
使用絕對(duì)定位也是可以把div2擺到div1的右邊的，而且絕對(duì)定位是不會(huì)占據(jù)文檔流空間的，如下圖，div1和div3之間沒有空白：
div2的CSS代碼：?
絕對(duì)定位是個(gè)好東西，可以把內(nèi)容顯示到頁(yè)面上的任何位置，但是對(duì)于我們程序員來(lái)說(shuō)，卻不能使用太多的絕對(duì)定位，因?yàn)槭褂贸绦騽?dòng)態(tài)向div中添加內(nèi)容，div的大小是不可知的，無(wú)法將每一個(gè)div的位置都定死。
四、CSS中的浮動(dòng)和清除模型
?? 在CSS中，最讓人不好理解的應(yīng)該算是float和clear意義了。float可以達(dá)到這樣一個(gè)效果，就是本來(lái)應(yīng)該一行一個(gè)的塊元素，如果定義了float屬性，則只要行的空間足夠，它會(huì)跑別的float元素的屁股后面，而不再會(huì)單獨(dú)占用一行，如下圖：
這里把div2和div3都定義了為浮動(dòng)，代碼如下：
下面是它們的html代碼：?
<div id="div1">div1 <div id="div2">div2</div> <div id="div3">div3</div> </div>下面是它們的css代碼：?
#div1 {border: 1px solid #000099;height: 60px;width: 450px;margin:2px; }#div2 {border: 1px solid #000099;height: 60px;width: 200px;margin:2px;float:left; }#div3 {border: 1px solid #000099;height: 60px;width: 200px;margin:2px;float:left; }因?yàn)閒loat的元素不占用文檔流空間，有時(shí)候元素還會(huì)重疊到float元素上，這里我就不舉例了。
為了解決上面的問(wèn)題，就需要在float之后的元素上面使用clear，在此例中，我們?cè)赿iv3后面加入一個(gè)空段落，并設(shè)置其為clear，如下：?
.clear{clear:left; }這時(shí)div1有了p這塊內(nèi)容（盡管p里面是空的）,并且clear:為left, 使得p的上外邊框邊界剛好在其上浮動(dòng)元素的下外邊距邊界之下
效果圖；
總結(jié)
以上是生活随笔為你收集整理的HTML之position:absolute relative static fixed的区别和理解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Mysql常用的命令
- 下一篇： Eclipse配置Tomcat服务器，通