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