css定位，css相對定位

css定位，css相對定位

一.概述

1.預設文件流定位方式

　　（1）.HTML預設文件以流模式定位，即內容元素按照先後順序依次上下定位；

　　（2）.HTML標籤元素總體分為塊狀元素、內嵌元素、內聯塊狀元素，可通過該標籤對應的DOM節點的display屬性進行查看預設值，display值的不同決定了他們各自在預設文件流中的定位方式的不同；

　　　　以下為position的可能值。

　　　　none：隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間inline：指定對象為內嵌元素。

　　　　block：指定對象為塊元素。

　　　　list-item：指定對象為清單項目。

　　　　inline-block：指定對象為內聯塊元素。（CSS2）

　　　　table：指定對象作為塊元素級的表格。類同於html標籤<table>（CSS2）

　　　　inline-table：指定對象作為內嵌元素級的表格。類同於html標籤<table>（CSS2）

　　　　table-caption：指定對象作為表格標題。類同於html標籤<caption>（CSS2）

　　　　table-cell：指定對象作為表格儲存格。類同於html標籤<td>（CSS2）

　　　　table-row：指定對象作為表格行。類同於html標籤<tr>（CSS2）

　　　　table-row-group：指定對象作為表格行組。類同於html標籤<tbody>（CSS2）

　　　　table-column：指定對象作為表格列。類同於html標籤<col>（CSS2）

　　　　table-column-group：指定對象作為表格列組顯示。類同於html標籤<colgroup>（CSS2）

　　　　table-header-group：指定對象作為表格標題組。類同於html標籤<thead>（CSS2）

　　　　table-footer-group：指定對象作為表格腳註組。類同於html標籤<tfoot>（CSS2）

　　　　run-in：根據上下文決定對象是內聯對象還是塊級對象。（CSS3）

    　　  box：將對象作為Auto Scaling盒顯示。（伸縮盒最老版本）（CSS3）

　　　　inline-box：將對象作為內聯塊級Auto Scaling盒顯示。（伸縮盒最老版本）（CSS3）

　　　　flexbox：將對象作為Auto Scaling盒顯示。（伸縮盒過渡版本）（CSS3）

　　　　inline-flexbox：將對象作為內聯塊級Auto Scaling盒顯示。（伸縮盒過渡版本）（CSS3）

　　　　flex：將對象作為Auto Scaling盒顯示。（伸縮盒最新版本）（CSS3）

　　　　inline-flex：將對象作為內聯塊級Auto Scaling盒顯示。（伸縮盒最新版本）（CSS3） 

　　（3）.塊狀元素單獨佔據一行，可設定他的寬高值。內嵌元素與緊挨著的內嵌元素（如果存在）共同佔據一行，直到元素內容到達視口的最末端則換行繼續以該種方式定位，內嵌元素不可以設定寬高。內聯塊狀元素定位方式與內嵌元素相同，但不同的是有塊狀元素的特性即可以設定他的寬高。

2.定位方式

　　（1）.CSS 有三種基本的定位機制：普通流、浮動和position定位。

　　總結來看：CSS 有三種基本的定位機制：普通流、浮動和絕對位置。除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設定行高可以增加這個框的高度。

二.四種position定位方式

　　1.static 靜態定位

　　static方式即預設的方式，按照流式布局定位。

　　2.relative 相對定位

　　在理解預設流式布局定位的基礎上，來看這種定位方式。

　　（1）.“相對”指的是相對於自身本來在預設流中的位置，將其position屬性設定為relative後，再通過top,bottom,left,right屬性對其進行相對於原來位置的位移;

　　（2）.該元素位移後，他本來在預設文件流中佔據的空間依然存在，其緊挨其後的元素的定位依據他本來位置進行定位。

　　（3）.該元素位移後，可能存在覆蓋其他元素的情況，所以可以通過z-index屬性設定顯示層級有限層級。

　　3.absolute 絕對位置

　　通過與relative相對定位進行比較的基礎上，來看這種定位方式。

　　（1）.“絕對”指的是絕對位置的元素已經脫離了文檔流，普通流中其它元素的布局就像絕對位置的元素不存在一樣；

　　（2）.絕對位置的元素還是要相對於某個對象進行定位，而這個對象可以簡單歸納為“絕對位置的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊”，

　　（3）.因為絕對位置的框與文檔流無關，所以它們也可以覆蓋頁面上的其它元素。

　　4.fixed 固定定位

　　元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。即無論頁面左右上線如何滾動，該種定位方式的元素都會根據你當前的視窗本身進行定位，大多應用於像類似側欄的客服連結、底部的回到頂部按鈕等需要在頁面上一直顯示並且其位置不會變化的元素。

三.float 浮動定位

　　float浮動定位可謂大殺器了，會用的人得心應手而且使用的很優雅，不明就裡的人則各種混亂。

關於float的講解w3school上的這篇http://www.w3school.com.cn/css/css_positioning_floating.asp文章已經很詳細了，我也沒有必要再重複造輪子了。以後在實際項目中如果碰到關於float的坑的話可以再單獨進行整理，比如現在已經遇到的清除浮動的各種方法。

完。