最近被css的定位要搞瘋了。。。下面我總結一下最近學習東西。
先介紹幾個概念：
塊框：div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即「塊框」。
行內框：與之相反，span 和 strong 等元素稱為「行內元素」，這是因為它們的內容顯示在行中，即「行內框」。
行框：由一行形成的水平框稱為行框（line box)。
position屬性:
static
元素框正常生成。塊級元素生成乙個矩形框，作為文件流的一部分，行內元素則會建立乙個或多個行框，置於其父元素中。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。(tips：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。)
理解：相對定位會按照元素的原始位置對該元素進行移動。
tips:在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。
h2.pos_right
向元素的原始左側位置增加 20 畫素。也就是向右移動20畫素。
absolute
元素框從文件流完全刪除，並相對於其包含塊定位。包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。
理解：通過絕對定位，元素可以放置到頁面上的任何位置。
tips:絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
fixed
元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。
z-index可被用於將在乙個元素放置於另一元素之後。
css 浮動：
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。
由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素「卡住」：
css clear 屬性：
clear 屬性規定元素的哪一側不允許其他浮動元素。值描述
left
在左側不允許浮動元素。
right
在右側不允許浮動元素。
both
在左右兩側均不允許浮動元素。
none
預設值。允許浮動元素出現在兩側。
inherit
規定應該從父元素繼承 clear 屬性的值。
css 定位連線 css絕對定位
定位的四種模式 static,relative,absolute,fixed 定位的四個位置 left,right,top,bottom 定位屬性 position,有四種狀態值 1.static 靜態定位,按元素在文件流中的順序排列,這是預設值,四個位置無效 2.relative 相對定位,元素相...
CSS定位 浮動定位
css定位機制 浮動定位 float屬性 進行浮動定位 left，right clear屬性 清除浮動 left，right，both float屬性 1.概述 div實現橫向多列布局 float屬性 left 左浮動 right 右浮動 none 不浮動 下圖為 的實現 float屬性用途 在 混...
CSS 定位2 絕對定位
設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。1 從文件流中刪除，原來占用的空間釋放 2 絕對定位的元...