關於定位的一些筆記

主要**於【

元素都有position屬性，其預設值是「static」，這也意味著，他們沒有也不接受位置屬性設定（top、right、bottom、left屬性值設定）。另外元素設定了position屬性，將會覆蓋元素的預設值「static」。

position relative

「relative」是「position」的另乙個屬性值，他和「static」屬性值非常的相似。主要的區別是「relative」可以給元素設定位移（offset）「top、right、bottom和left」屬性。通過這些位移屬性設定可以給元素進行精確的定位。

盒子位移屬性是如何工作？

盒子的位移屬性有四個「top、right、bottom和left」，用來指定元素的定位位置和方向。這些屬性只能在元素的「position」屬性設定了「relative、absolute和fixed」屬性值，才生效。

對於相對定位元素，這些屬性的設定讓元素從預設位置移動。例如，top設定乙個值「20px」在乙個相對定位的元素上，這個元素會在原來位置向下移動「20px」。反之，「top」設定乙個「-20px」，這個元素會在原來的位置向上移動「20px」。

對於絕對定位和固定定位鮮紅，這些屬性指定了元素與父元素邊緣之間的距離，例如，絕對定位的元素設定乙個「top」值為「20px」，將使絕對定位元素相對於其設定了相對定位的祖先元素頂部邊緣向下移動「20px」，反之，如果設定乙個「top」值為「20px」，將使絕對定位元素相對於其設定了相對定位的祖先元素頂部邊緣向上移動「20px」。（絕對定位的參考點是其祖先元素設定了「relative」或者「absolute」值）。

在下面的演示中，每個元素還是在另乙個元素頂部，然後他們根據自己移位屬性，從預設位置進行移動，由於他們移向方向不一樣，這些值使元素重疊在一起。當元素設定了相對定時，周邊的元素也能看到相對定位元素的預設位置。（也就是說，相對定位元素的預設位置還是被元素自身占用，別的元素是無法占用的。也就是說相對定位元素的位移是相對於元素自身的邊緣進行位移）。

當乙個絕對定位的元素有固定的高度和寬度，並且盒子位移同時設定了「top」和「bottom」時，「top」更具優先組，另外和相對定位元素一樣，當同時設定了「left」和「right」時，優先順序取決於他的頁面使用的語言。

當乙個絕對定位的元素沒有明確指定高度和寬度，同時使用盒子位移的「top」和「bottom」屬性時，會使整個元素的高度跨越整個容器。同樣的，當這個元素同時使用位移「left」和「right」屬性值，會使整個元素的寬度跨越整個容器。如果同時使用位移四個屬性，可以指定乙個寬度和高度顯示元素。（這個時候絕對定位元素的寬度和高度都是100%。）

position fixed

固定定位和絕對定位很類似，但是他定位是相對於瀏覽器視窗，並且不會隨滾動條進行滾動。也就是說，不管使用者停留在頁面那個地方，固定定位的元素將始終停留在頁面的乙個地方。「position」屬性值中，僅有「fixed」屬性值不能在ie6瀏覽器下執行，如果你想在ie6正常使用固定定位，那麼你就需要為他寫一些hacks。

z-index屬性

通常都認為web頁面是二維頁面，顯示的元素都在x軸和y軸上。當你的元素有定位時，他們有時候會放置在另乙個元素的頂部。要改變這些元素是乙個 怎麼樣的層疊順序，要知道z軸，z軸是用「z-index」屬性來控制的。

一般來說，在dom中，元素出現的時候就放置在z軸上。在dom中，元素在頂部的要低於底部的。改變這種層疊順序可以直接使用「z-index」來控制。元素的「z-index」值越高將會出現在越上面，不管元素在dom哪個位置上。

給元素設定「z-index」屬性，首先要在這個元素上設定了「position」屬性值為「relatvie」、「absolute」或者「fixed」之一。同樣的，你要使用盒子位移屬性，你也要先確認元素設定了「positions」屬性值為「relative」、「absolute」或者「fixed」之一。

在下面的登例子中，如果每個盒子都不設定「z-index」，那麼第乙個box在第二個下面，第二個在第三個下面，第三個在第四個下面。如果在盒子中指定「z-index」的值，第二個盒子在第乙個和第三個上面，第三個盒子在第四個上面。

關於定位的一些事。

當在這乙個頁面上想要實現布局打破固有的自上向下的文件流排版。就需要脫離出文件流，從而移動布局排版。今天在這裡對於定位有一點想法，和記錄了一些很是有用的內容。首先，css定位是基於盒子模型的，可分為 靜態static定位 絕對absolute定位 相對relative 定位 固定fixed定位。其中，...

關於css定位的一些理解

static 預設值。無特殊定位，物件遵循html定位規則 absolute 將物件從文件流中拖出,使用left,right,top,bottom 等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件,則依據body物件。而其層疊通過z index屬性定義 fixed ...

關於CSS定位的一些總結

所有主流瀏覽器都支援 position 屬性。position屬性規定元素的定位型別，影響元素框生成的方式。值描述 absolute 生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位，如果不存在這樣的父元素，則依據最初的包含快。根據使用者 的不同，最初的包含塊可能是畫布或 h...