CSS定位執行個體講解

本文主要和大家介紹CSS定位的教程,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能協助到大家。

1.文檔流

簡單說就是元素按照其在 HTML 中的位置順序決定排布的過程。HTML的布局機制就是用文檔流模型的，即塊元素（block）獨佔一行，內嵌元素（inline）不獨佔一行。

一般使用margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用於布局分開元素使元素與元素互不相干；padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段“距離”。只要不是float和絕對位置方式布局的，都在文檔流裡面。

2.position屬性介紹

1. static，預設值。位置設定為static的元素，它始終會處於文檔流給予的位置。

2. inherit，規定應該從父元素繼承 position屬性的值。但是任何的版本的 Internet Explorer （包括 IE8）都不支援屬性值 “inherit”。

3. fixed，產生絕對位置的元素。預設情況下，可定位於相對於瀏覽器視窗的指定座標。

4. 元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。不論視窗滾動與否，元素都會留在那個位置。但當祖先元素具有transform屬性且不為none時，就會相對於祖先元素指定座標，而不是瀏覽器視窗。

5. absolute，產生絕對位置的元素，相對於距該元素最近的已定位的祖先元素進行定位。

6. 此元素的位置可通過 “left”、”top”、”right” 以及 “bottom” 屬性來規定。

7. relative，產生相對定位的元素，相對於該元素在文檔中的初始位置進行定位。

8. 通過 “left”、”top”、”right” 以及 “bottom” 屬性來設定此元素相對於自身位置的位移。

3.相對定位

relative產生相對定位的元素，相對於其正常位置進行定位。

相對定位完成的過程如下：

按預設（static）產生一個元素(並且元素像層一樣浮動了起來)。相對於以前的位置移動，移動的方向和幅度由 left、right、top、bottom 屬性確定，位移前的位置保留不動。

  <style type="text/css">             #box1 {            margin: 20px;            width: 200px;            height: 200px;            background-color: yellow;        }        #box2 {            margin: 20px;            width: 200px;            height: 200px;            background-color: red;            /*position: relative;            left: 100px;            top: 100px;*/        }  </style>  <p id="box1"></p>  <p id="box2"></p>

其中box2中的注釋代碼未生效前，是按照文檔流進行排序呈現。

但是，當注釋代碼取消注釋生效後，就會相對文檔流中應當呈現的位置進行移動。

所以，相對定位的參照物是它本身。

4.絕對位置

絕對位置與相對定位的一大不同之處就是，當我們把一個元素設定成絕對位置，那麼這個元素將會脫離文檔流，其他元素就會認為這個元素不存在於文檔流中而填充它原來的位置。絕對位置元素根據它的參照物移動自己的位置，而參照物則需要根據它祖先元素的定位設定來確定。

所謂根據它祖先元素的定位設定來確定簡單理解為：相對於該元素最近的已定位的祖先元素，如果沒有一個祖先元素設定定位，那麼參照物是body層。

1. 在祖先元素沒定位的情況下，使用absolute。在這種情況下，參考物就是body。

2. 祖先元素有定位，祖先元素只要設定了值不為position:static之外的值，都視為有定位，並且最近的祖先元素會被設定為絕對位置元素的參照物。在這種情況下，參考物就是最近的祖先元素。

3. 在沒設定left/right、top/bottom的情況下，absolute元素的位置就是該元素在文檔流裡的位置