摘要：靜態(tài)定位下，每個(gè)元素在處在常規(guī)文檔流中，它們都是塊級(jí)元素，所以會(huì)在頁(yè)面中自上而下地堆疊。這說明絕對(duì)定位的元素脫離了常規(guī)文檔流，它現(xiàn)在是相對(duì)于頂級(jí)元素在定位。事實(shí)上，一個(gè)相對(duì)定位元素同時(shí)設(shè)置了和位移屬性值，實(shí)際上優(yōu)先級(jí)高于。

這是《CSS設(shè)計(jì)指南》的讀書筆記，用于加深學(xué)習(xí)效果。
前一篇CSS入門指南-2：盒子模型、浮動(dòng)和清除介紹了css盒子模型、浮動(dòng)和清除，這一篇介紹 css元素的定位。

CSS 布局的核心是 position 屬性，對(duì)元素盒子應(yīng)用這個(gè)屬性，可以相對(duì)于它在常規(guī)文檔流中的位置重新定位。
position 屬性有4個(gè)值：static、relative、absoulte、fixed，默認(rèn)值為 static。

接下來我會(huì)用以下四個(gè)段落來逐個(gè)說明這些屬性是什么意思。

First Paragraph
Second Paragraph
Third Paragraph
First Paragraph

我們先看一下四個(gè)段落都采用靜態(tài)定位的效果。

靜態(tài)定位下，每個(gè)元素在處在常規(guī)文檔流中，它們都是塊級(jí)元素，所以會(huì)在頁(yè)面中自上而下地堆疊。

現(xiàn)在我把第三段的 position 屬性設(shè)置為 relative。

p#specialpara {
    position: relative;
    top: 25px;
    left: 30px;
}

因?yàn)橄鄬?duì)定位相對(duì)的是它原來在文檔流中的位置（默認(rèn)位置），所以如果只設(shè)置 position 樣式不會(huì)有任何變化。這里我同時(shí)設(shè)置了 top 和 left 屬性來改變它的位置。

現(xiàn)在它的效果如圖所示：

現(xiàn)在，第三段從原來的元素（body）中掙脫了出來，與它在文檔中的默認(rèn)位置相比向下移動(dòng)了25像素，向右移動(dòng)了30像素。

需要注意的是，除了這個(gè)元素自己相對(duì)于原始位置挪動(dòng)了一下以外，頁(yè)面沒有任何改變。這個(gè)元素原來占據(jù)的空間沒有動(dòng)，其他元素也沒動(dòng)。

這時(shí)，如果不想第四段被它擋住，可以給第四段設(shè)置一個(gè) margin-top 值。

絕對(duì)定位跟靜態(tài)定位和相對(duì)定位相比，它會(huì)把元素徹底從文檔流中拿出來。

我們把 position 改為絕對(duì)定位看一下：

p#specialpara {
    position: absoulte;
    top: 25px;
    left: 30px;
}

效果如圖：

可以看到，第三段原來的位置被回收了。這說明絕對(duì)定位的元素脫離了常規(guī)文檔流，它現(xiàn)在是相對(duì)于頂級(jí)元素 body 在定位。

現(xiàn)在就涉及到一個(gè)概念：定位上下文，這個(gè)后邊說，先繼續(xù)看最后一種定位方式：固定定位。

盒子位移屬性是如何工作？
盒子的位移屬性有四個(gè)“top、right、bottom和left”，用來指定元素的定位位置和方向。這些屬性只能在元素的“position”屬性設(shè)置了“relative、absolute和fixed”屬性值，才生效。
對(duì)于相對(duì)定位元素，這些屬性的設(shè)置讓元素從默認(rèn)位置移動(dòng)。例如，top設(shè)置一個(gè)值“20px”在一個(gè)相對(duì)定位的元素上，這個(gè)元素會(huì)在原來位置向下移動(dòng)“20px”。
對(duì)于絕對(duì)定位和固定定位，這些屬性指定了元素與父元素邊緣之間的距離，例如，絕對(duì)定位的元素設(shè)置一個(gè)“top”值為“20px”，將使絕對(duì)定位元素相對(duì)于其設(shè)置了相對(duì)定位的祖先元素頂部邊緣向下移動(dòng)“20px”，反之，如果設(shè)置一個(gè)“top”值為“20px”，將使絕對(duì)定位元素相對(duì)于其設(shè)置了相對(duì)定位的祖先元素頂部邊緣向上移動(dòng)“20px”。（絕對(duì)定位的參考點(diǎn)是其祖先元素設(shè)置了“relative”或者“absolute”值）。

事實(shí)上，一個(gè)相對(duì)定位元素同時(shí)設(shè)置了“top”和“bottom”位移屬性值，實(shí)際上“top”優(yōu)先級(jí)高于“bottom”。然而，一個(gè)相對(duì)定位元素同時(shí)設(shè)置了“l(fā)eft”和“right”位移屬性，他們的優(yōu)先級(jí)取決于頁(yè)面使用的是哪種語(yǔ)言，例如，如果你的頁(yè)面是英文頁(yè)面，那么“l(fā)eft”位移屬性優(yōu)先級(jí)高，如果你的頁(yè)面是阿拉伯語(yǔ)，那么“right”的位移屬性優(yōu)先級(jí)高

固定定位與絕對(duì)定位類似，我們先看下把定位改為相對(duì)定位的效果：

p#specialpara {
    position: fixed;
    top: 25px;
    left: 30px;
}

效果如圖：

這樣看效果和絕對(duì)定位完全一致，但是固定定位的定位上下文是瀏覽器窗口，她并不會(huì)隨頁(yè)面滾動(dòng)。

以下是使用相對(duì)定位和固定定位的圖示：

固定定位最常見的一種用途就是在頁(yè)面中創(chuàng)建一個(gè)固定頭部、或者腳部、或者固定頁(yè)面的一個(gè)側(cè)面。就算是用戶移動(dòng)瀏覽器的滾動(dòng)條，還是會(huì)固定在頁(yè)面。

現(xiàn)在我們來看下定位上下文。

把元素的 position 屬性設(shè)定為 relative、absolute或 fixed 后，可以使用 top、right、bottom 和 left 屬性，相對(duì)于另一個(gè)元素移動(dòng)該元素的位置。這里另一個(gè)元素就是當(dāng)前元素的定位上下文。

我們?cè)诮榻B絕對(duì)定位的時(shí)候說過，絕對(duì)定位元素默認(rèn)的定位上下文是 body，這是因?yàn)?body 是標(biāo)記中所有元素唯一的祖先元素。不過，如果把他相應(yīng)的元素設(shè)定為 relative，絕對(duì)定位元素的任何祖先元素都可以成為它的定位上下文。

比如：

    

      
 This is text for a paragraph to demonstrate contextual
        positioning. Here are two divs, one nested in the other. The inner div now
        has absolute positioning, so it positions itself relative to the default
        positioning context, body.
    

css 樣式如下：

div#outer {
    width:250px; 
    margin:100px 40px; 
    border-top:3px solid red;
}
div#inner {
    top:10px; 
    left:20px; 
    background:#DDD;
}

結(jié)果如圖：

這里內(nèi)部和外部的 div 都是是靜態(tài)定位，不存在誰(shuí)是誰(shuí)的定位上下文這個(gè)問題，所以 top 和 left 屬性并沒有生效。

下面我們把內(nèi)部 div 設(shè)定為絕對(duì)定位，來看一下變化。

div#inner {
    top:10px; 
    left:20px; 
    background:#DDD;
}

這是效果如圖：

這里由于不存在相對(duì)定位的其他祖先元素可以作為定位上下文，絕對(duì)定位只能相對(duì)于 body 定位。

事實(shí)上，只要把元素的外邊距和內(nèi)邊距設(shè)定好，多數(shù)情況下使用靜態(tài)定位就可以實(shí)現(xiàn)頁(yè)面布局了。除非真正需要那么做，否則不要輕易修改元素的 position 屬性。

現(xiàn)在我們把外部 div 的 position 設(shè)置為 relative：

div#outer {
    position: relative;
    width:250px; 
    margin:100px 40px; 
    border-top:3px solid red;
}

外部 div 改為相對(duì)定位之后，后代中絕對(duì)定位的元素就會(huì)按照 top 和 left 屬性的設(shè)定，相對(duì)于外部 div 定位。此時(shí)內(nèi)部 div的 top 和 left 屬性參照的就是外部 div。

最后我們說一下和定位相關(guān)的顯示屬性。

所有的元素都有display屬性。display 屬性有兩個(gè)最常用的值：block（塊級(jí)元素）和inline（行內(nèi)元素）。

塊級(jí)元素：比如段落、標(biāo)題、列表等，在瀏覽器中上下堆疊顯示。

行內(nèi)元素：比如 a、span、和 img，在瀏覽器中左右并排顯示，只有前一行沒有空間時(shí)才會(huì)顯示對(duì)下一行。

塊級(jí)元素和行內(nèi)元素是可以互相轉(zhuǎn)化的：

/*默認(rèn)為塊級(jí)元素*/
p {display: inline;}
/*默認(rèn)為行內(nèi)元素*/
a {display: block;}

display 還有一個(gè)屬性值：none。把display設(shè)置為 none，該元素及所有包含在其中的元素，都不會(huì)在頁(yè)面中顯示。它們?cè)瓉碚紦?jù)的空間也會(huì)被回收
相對(duì)的屬性是 visibility，這個(gè)屬性常用的值是 visible（默認(rèn)）和 hidden。把元素的 visibility 設(shè)定為 hidden，元素會(huì)隱藏，但它占據(jù)的空間仍然存在。

我們上一篇 CSS入門指南-2：盒子模型、浮動(dòng)和清除 中提到的 clearfix 類就用到了這個(gè)屬性，在那里我們會(huì)添加一個(gè)塊級(jí)元素，然后把內(nèi)容隱藏，以用來清除浮動(dòng)。clearfix 的樣式如下：

.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
    }

10步掌握CSS定位: position static relative absolute float

HTML和CSS高級(jí)指南之二——定位詳解

最后，感謝女朋友支持。