CSS定位描述

css 有三種基本的定位機制：普通流、浮動和絕對定位。

一、普通流

除非專門指定，否則所有框都在普通流中定位。普通流中元素框的位置由元素在(x)html中的位置決定。塊級元素從上到下依次排列，框之間的垂直距離由框的垂直margin計算得到。行內元素在一行中水平布置。

二、定位

**　１、相對定位**

被看作普通流定位模型的一部分，定位元素的位置相對於它在普通流中的位置進行移動。使用相對定位的元素不管它是否進行移動，元素仍要佔據它原來的位置。移動元素會導致它覆蓋其他的框。

box1 box2 box3

效果如下圖所示：

**　２、絕對定位**

相對於已定位的最近的祖先元素，如果沒有已定位的最近的祖先元素，那麼它的位置就相對於最初的包含塊（如body）。絕對定位的框可以從它的包含塊向上、右、下、左移動。

絕對定位的框脫離普通流，所以它可以覆蓋頁面上的其他元素，可以通過設定ｚ-iindex屬性來控制這些框的堆放次序。

效果如下圖所示：

備註：相對於已相對定位的祖先元素對框進行絕對定位，在大多數現代瀏覽器中都可以實現的很好。

**　３、固定定位**

相對於瀏覽器視窗，其餘的特點類似於絕對定位。

三、浮動

浮動的框可以在左右移動，直到它的外邊框邊緣碰到包含框或另乙個浮動框的邊緣。浮動的框脫離普通流。

如果包含塊太窄，無法容納水平排列的浮動元素，那麼其他浮動塊向下移動，直到有足夠多的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能會被其他浮動元素卡住。

行內元素會圍繞著浮動框排列。

請看下圖，當把框 1 向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：

再請看下圖，當框 1 向左浮動時，它脫離文件流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從檢視中消失。

如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前乙個浮動框。

如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素「卡住」：

簡單介紹下清除浮動的2中方法。

方法一：結合:after選擇器清除浮動。

box2 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦

方法二，在容器最後新增乙個空元素並且清理它。

效果均如下所示：

附錄：所有主流瀏覽器都支援 position 屬性。position屬性規定元素的定位型別，影響元素框生成的方式。

absolute

生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位，如果不存在這樣的父元素，則依據最初的包含快。根據使用者**的不同，最初的包含塊可能是畫布或 html 元素。

元素的位置通過「left」, 「top」, 「right」以及「bottom」屬性進行規定，也可以通過z-index進行層次分級。

（元素框從文件流完全刪除，並相對於其包含塊定位。包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。）

fixed

生成固定／絕對定位的元素，相對於瀏覽器視窗進行定位。

元素的位置通過「left」, 「top」, 「right」以及「bottom」屬性進行規定。

（元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。）

relative

生成相對定位的元素，相對於其正常位置進行定位。

因此，「left:20」會向元素的 left 位置新增 20 畫素。

（相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。元素框偏移某個距離。元素仍保持其未定位前的形狀，仍保留原本所佔的空間。）

static

預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告，即上述宣告無效）。

（元素框正常生成。塊級元素生成乙個矩形框，作為文件流的一部分，行內元素則會建立乙個或多個行框，置於其父元素中。）

inherit ：規定應該從父元素繼承 position 屬性的值。

css 定位屬性允許你對元素進行定位。

屬性描述

position

把元素放置到乙個靜態的、相對的、絕對的、或固定的位置中。

top定義了乙個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

right

定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。

bottom

定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。

left

定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

overflow

設定當元素的內容溢位其區域時發生的事情。

clip

設定元素的形狀。元素被剪入這個形狀之中，然後顯示出來。

vertical-align

設定元素的垂直對齊方式。

z-index

設定元素的堆疊順序。

CSS定位描述

css 定位連線 css絕對定位

CSS定位浮動定位

CSS 定位2 絕對定位

CSS定位描述

css 定位連線 css絕對定位

CSS定位 浮動定位

CSS 定位2 絕對定位

相關推薦

CSS定位浮動定位