css總結——position

標籤：style   io   color   ar   os   使用   sp   strong   div   

        CSS（Cascading Style Sheet），中文翻譯為層疊樣式表，是用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。在css控制頁面中，主要有四種樣式：行內樣式（style 屬性將css嵌套在p 標記中）、內嵌式（在HTML部分，沒採用任何css代碼，而是在style中對css代碼進行嵌套）、連結式（使用link語句，將外部css匯入到頁面中）和匯入樣式。

        在樣式設計中，有一個非常關鍵的屬性——position

        CSS中有不少屬性是用來定位的，這也為我們採用DIV+CSS 布局，取代古老的tabel布局提供了基礎支援。

                bottom： 定義了定位元素下外邊距邊界與其包含塊下邊界之間的位移。 
                clip： 設定元素的形狀。元素被剪入這個形狀之中，然後顯示出來。 
                left： 定義了定位元素左外邊距邊界與其包含塊左邊界之間的位移。 
                overflow： 設定當元素的內容溢出其地區時發生的事情。 
                position： 把元素放置到一個靜態、相對的、絕對的、或固定的位置中。 
                right： 定義了定位元素右外邊距邊界與其包含塊右邊界之間的位移。 
                top： 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的位移。 
                vertical-align： 設定元素的垂直對齊。 

                z-index： 設定元素的堆疊順序。

        而這其中非常關鍵和初學者容易搞混的概念就是 position 屬性：

                static 預設：位置設定為 static 的元素，它始終會處於頁面流給予的位置（static 元素會忽略任何 top、bottom、left 或 right 聲明）。

                relative：位置被設定為 relative 的元素，可將其移至相對於其正常位置的地方，因此 "left:20" 會將元素移至元素正常位置左邊 20 個像素的位置。 

                absolute：位置設定為 absolute 的元素，可定位於相對於包含它的元素的指定座標。此元素的位置可通過 "left"、"top"、"right" 以及"bottom" 屬性來規定。

                fixed：位置被設定為 fixed 的元素，可定位於相對於瀏覽器視窗的指定座標。此元素的位置可通過 "left"、"top"、"right" 以及"bottom" 屬性來規定。

        不論視窗滾動與否，元素都會留在那個位置。工作於 IE7（strict 模式）。這些屬性是DIV布局的奠基石。由於瀏覽器的不同，盒模式中也有差異，比如說對於寬度盒高度，在不同瀏覽器中定義是不同的，IE6是包含邊框 、內邊距，而FF的只是指內容的寬度。

        細節上的差異，往往是我們在日常工作中能總結出來的。所以也不必太在意。瞭解簡單的css的使用，在不斷應用的過程中，進行改進和更加深入的瞭解。對position的簡單總結，如有錯誤，歡迎指出，感激不盡！！

css總結——position