CSS 定位 (Positioning) 屬性允許你對元素進行定位。

CSS 定位和浮動

CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務(wù)。
定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。

一切皆為框

div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內(nèi)容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內(nèi)元素”，這是因為它們的內(nèi)容顯示在行中，即“行內(nèi)框”。
可以使用 display 屬性改變生成的框的類型。這意味著，通過將 display 屬性設(shè)置為 block，可以讓行內(nèi)元素（比如 <a> 元素）表現(xiàn)得像塊級元素一樣。還可以通過把 display 設(shè)置為 none，讓生成的元素根本沒有框。這樣的話，該框及其所有內(nèi)容就不再顯示，不占用文檔中的空間。

行內(nèi)元素與塊級元素

區(qū)別

行內(nèi)元素會在一條直線上排列（默認(rèn)寬度只與內(nèi)容有關(guān)），都是同一行的，水平方向排列。

塊級元素各占據(jù)一行（默認(rèn)寬度是它本身父容器的100%（和父元素的寬度一致），與內(nèi)容無關(guān)），垂直方向排列。塊級元素從新行開始，結(jié)束接著一個斷行。

塊級元素可以包含行內(nèi)元素和塊級元素。行內(nèi)元素不能包含塊級元素，只能包含文本或者其它行內(nèi)元素。

行內(nèi)元素與塊級元素屬性的不同，主要是盒模型屬性上：行內(nèi)元素設(shè)置width無效，height無效(可以設(shè)置line-height)，margin上下無效，padding上下無效

行內(nèi)元素和塊級元素轉(zhuǎn)換

 display:block; (字面意思表現(xiàn)形式設(shè)為塊級元素)
 display:inline; (字面意思表現(xiàn)形式設(shè)為行內(nèi)元素)

inline-block

inline-block 的元素（如input、img)既具有塊級元素可以設(shè)置寬高的特性，同時又具有行內(nèi)元素默認(rèn)不換行的特性。當(dāng)然不僅僅是這些特性，比如 inline-block 元素也可以設(shè)置 vertical-align（因為這個垂直對齊屬性只對設(shè)置了inline-block的元素有效） 屬性。
HTML 中的換行符、空格符、制表符等合并為空白符，字體大小不為 0 的情況下，空白符自然占據(jù)一定的寬度，使用inline-block 會產(chǎn)生元素間的空隙。

關(guān)于如何去除inline-block的間隙，請看張鑫旭.列出的N種方法...

display屬性

display 屬性規(guī)定元素應(yīng)該生成的框的類型。這個屬性用于定義建立布局時元素生成的顯示框類型。對于 HTML 等文檔類型，如果使用 display 不謹(jǐn)慎會很危險，因為可能違反 HTML 中已經(jīng)定義的顯示層次結(jié)構(gòu)。

CSS 定位機制

CSS 有三種基本的定位機制：普通流(文檔流)、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

行內(nèi)框在一行中水平布置?？梢允褂盟絻?nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框。不過，設(shè)置行高可以增加這個框的高度。

CSSposition屬性

通過使用position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。
??static
??元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。
??relative
??元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
??absolute
??元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
??fixed
??元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。

相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。

CSS 相對定位

設(shè)置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。

相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。

如果將 top 設(shè)置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果 left 設(shè)置為 30 像素，那么會在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

image

CSS絕對定位

設(shè)置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。
普通流中其它元素的布局就像絕對定位的元素不存在一樣：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

image

z-index屬性

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
元素可擁有負的 z-index 屬性值。

CSS浮動

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

請看下圖，當(dāng)把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：

image

再請看下圖，當(dāng)框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

image

CSS float 屬性

在 CSS 中，我們通過 float 屬性實現(xiàn)元素的浮動。

float 屬性定義元素在哪個方向浮動。以往這個屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。

行框和清理

浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。
因此，創(chuàng)建浮動框可以使文本圍繞圖像：

image

image

CSS clear屬性

clear 屬性規(guī)定元素的哪一側(cè)不允許其他浮動元素。

讓我們更詳細地看看浮動和清理。假設(shè)希望讓一個圖片浮動到文本塊的左邊，并且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。您可能編寫下面的代碼：

<style>
  .news {
      background-color: gray;
      border: solid 1px black;
  }
  .news img {
      float: left;
  }
 .news p {
      float: right;
  }
</style>

<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
</div>

這種情況下，出現(xiàn)了一個問題。因為浮動元素脫離了文檔流，所以包圍圖片和文本的 div 不占據(jù)空間。
如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應(yīng)用 clear：

image

不幸的是出現(xiàn)了一個新的問題，由于沒有現(xiàn)有的元素可以應(yīng)用清理，所以我們只能添加一個空元素并且清理它。

<style>
  .news {
      background-color: gray;
      border: solid 1px black;
  }
  .news img {
      float: left;
  }
 .news p {
      float: right;
  }
 .clear {
      clear: both;
  }
</style>

<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="clear"></div>
</div>

這樣可以實現(xiàn)我們希望的效果，但是需要添加多余的代碼。常常有元素可以應(yīng)用 clear，但是有時候不得不為了進行布局而添加無意義的標(biāo)記。