CSS學習篇核心之 定位

關於css

樣式的進一步學習，我們今天主要學習下

css的定位知識，定位就是定義我們的元素框由原來的位置在移動後所處的位置。關於定位有三種相對定位、絕對定位和浮動。

相對定位相對來說是比較簡單的，如果對乙個元素進行相對定位，它首先出現在其初始位置，然後可以設定它垂直貨水平位置，讓這個元素「相對於」它的起點進行移動。

我們對框

2進行設定，將 top 設定為20px，那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 30 畫素，那麼會在元素左邊建立 30 畫素的空間，也就是將元素向右移動。

需要注意的是，在使用相對定位時，無論怎麼進行移動，框

2仍然會佔據原來的空間，即原來的空間依然會保留著，但是框

2會覆蓋框

3這就是相對定位。

設定為絕對定位後，元素原先所在的正常的文件流中所占有地空見就會關閉，就像該元素原來不村子一樣，然後根據最近的已定位的祖先元素進行移動。

我們還是對框

2進行移動，將top 設定為 20px，

left 設定為 30 畫素。

當對框2

進行設定為絕對定位時，首先框

2原來所佔的空見就會關閉，框

2原來的位置就不村子了，所以框

3就佔據了框

2的位置，接下來設定框

2的移動，框

2移動相對於祖先元素，這個祖先元素就是保護框1、

2、3的這個空白塊，框

2相對于父元素空白框進行移動，移動完成後就成圖所示那樣。

關於絕對定位

2個重點，一是原來的框

2所在空見不存在了，其它元素布局按照普通流的定位重新移動，即框

3佔據框

2原先關閉的位置；第二就是框

2移動是相對於祖先元素，如果沒有祖先元素，那麼它的位置相對於最初的包含塊。

相對定位是「相對於」元素在文件中的初始位置，而絕對定位是「相對於」最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼「相對於」最初的包含塊；相對定位原先空見仍然存在，絕對定位原先空間不再存在。

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

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

，如圖

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

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

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

定位屬性

css中的重中之重，所以需要特別的重視，定位首先需要理解，並能區分相對定位和絕對定位有什麼不同，在理解的角度上我們然後才能慢慢的去應用，最後通過應用去徹底掌握它。

CSS學習篇核心之 定位

關於css 樣式的進一步學習，我們今天主要學習下 css的定位知識，定位就是定義我們的元素框由原來的位置在移動後所處的位置。關於定位有三種相對定位 絕對定位和浮動。相對定位相對來說是比較簡單的，如果對乙個元素進行相對定位，它首先出現在其初始位置，然後可以設定它垂直貨水平位置，讓這個元素 相對於 它的...

CSS學習之 定位

如果，說浮動，關鍵在乙個 浮 字上面，那麼 我們的定位，關鍵在於乙個 位 上。css離不開定位，特別是js特效，天天和定位打交道。那麼定位，最常運用的場景再那裡呢？小黃色塊可以再上移動 元素的定位屬性主要包括定位模式和邊偏移兩部分。1 邊偏移 邊偏移屬性 描述top 頂端偏移量，定義元素相對於其父元...

CSS學習之定位

設定為相對定位 relative 的元素會偏移某個距離，元素仍保持其未定位前的形狀，他原本所佔的空間仍然保留 相對定位是乙個非常容易掌握的概念，如果對乙個元素進行相對定位，它將出現在它所在的位置上 然後可以通過設定垂直或者水平位置讓這個元素相對於它的起點進行移動。如果將top 設定為20px，那麼框...