在css中有乙個非常重要的屬性position，然而要使用css進行定位操作，並不僅僅通過這個屬性來實現，二者不要混淆。先看一段**：
一、relative演示
html部分**：
box-1
css部分**：
.father
.son
頁面效果：
從css上看沒有對盒子設定任何浮動屬性和定位屬性，所以頁面展示效果就是標準流下的巢狀效果。這種效果其實就是position屬性的預設值static的效果，static即為盒子position屬性的預設值，它表示盒子在標準流或浮動方式下的布局。
修改.son**：
.son
頁面效果：
這裡設定box-1相對於它原來位置向左和向下偏移了各30畫素，而不是相對于父div邊框，即效果圖中標出的白色雙向箭頭的距離，這點十分重要。所以relative常以標準的排版方式為基礎，然後使盒子相對於它在原來的標準位置偏移指定的距離。為了解釋清楚這件事，請看下圖：
在這個圖中，三個盒子均設定了浮動方式，由於對box-2指定了position為relative，然後相對於它自己原來的位置向右下各偏移30畫素，所以產生了此效果，但在box-3的眼中box-2還在它原來的位置，而不是相對移動之後的位置。
二、absolute演示
html部分**：
box-1
box-2
box-3
css部分**：
.father
.father div
頁面效果：
增加css**：
.son
頁面效果：
此時box-2脫離了標準流，跑到了瀏覽器的右上角，那麼約對定位absolute就意味著相對於瀏覽器的定位呢？答案是no。我們修改father的**，增加乙個定位屬性，但大小和位置不變：
.father
再看頁面效果：
此時會發現box-2這次跑到了父div的右上角？這是為什麼呢？它是以它的包含框為基準，檢視的父親是否有設定定位屬性，若父親有定位屬性則以父親為參考進行移動，若父親沒有設定定位屬性就去檢視它的爺爺，依次類推，若所有的祖先均沒有設定定位屬性，則以瀏覽器為參考進行移動。
再強調一下對乙個div設定為絕對定位，（1）它會脫離原來的標準流，其他的兄弟盒子則無視它的存在（2）以它的包含框為基準去檢視父類是否有定位屬性，以有定位屬性的祖先為參考進行移動，若祖先均無定位屬性則以瀏覽器為參考進行移動。
三、fixed演示
html部分**：
box-1
box-2
box-3
css部分**：
.father
.father div
.son
頁面效果：
此時故意把瀏覽器視窗拖的這樣小，然後向下拉動右側滾動條，發現box-2始終在瀏覽器的右上角，所以fixed表示固定定位，它和絕對定位類似，只是以瀏覽器視窗為基準進行定位。
大家瀏覽網頁時，常比較討厭的廣告始終佔據網頁的右側，去也去不掉，其定位就是如此。
CSS（11）CSS浮動和清理
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。1 請看下圖，當把框 1 向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣 2 再請看下圖，當框 1 向左浮動時，它脫...
css盒子的定位
css盒子定位 什麼是盒子定位呢，顧名思義，就是元素盒子 以下主要以塊級盒講解 在頁面中的位置，定位就是確定他的位置，盒子定位分為以下四種 1 靜態位置 position static 也就是預設值 每乙個元素在沒有float值的時候，都有position值，就是static，可以直接理解它在是預設...
CSS 定位和彈性盒子
1 相對定位 position relative 2 絕對定位 position absolute 3 固定定位 position fixed 生成絕對定位的元素，相對於瀏覽器視窗進行定位 4 預設值position static 預設值。沒有定位，元素出現在正常的流中 5 position inh...