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)元素會在一條直線上排列（默認寬度只與內(nèi)容有關(guān)）我磁，都是同一行的，水平方向排列驻襟。

塊級元素各占據(jù)一行（默認寬度是它本身父容器的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)元素默認不換行的特性嘱巾。當(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 不謹慎會很危險，因為可能違反 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)記。