這是《CSS設計指南》的讀書筆記，用於加深學習效果。
前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。
定位（position）
CSS 佈局的核心是 position 屬性，對元素盒子應用這個屬性，可以相對於它在常規文件流中的位置重新定位。
position 屬性有4個值：static、relative、absoulte、fixed，預設值為 static。
接下來我會用以下四個段落來逐個說明這些屬性是什麼意思。
<p id="first">First Paragraph</p>
<p id="Second">Second Paragraph</p>
<p id="specialpara">Third Paragraph</p>
<p id="fourth">First Paragraph</p>複製程式碼靜態定位（static）
我們先看一下四個段落都採用靜態定位的效果。
靜態定位下，每個元素在處在常規文件流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。
相對定位（relative）
現在我把第三段的 position 屬性設定為 relative。
p#specialpara {
position: relative;
top: 25px;
left: 30px;
}複製程式碼因為相對定位相對的是它原來在文件流中的位置（預設位置），所以如果只設定 position 樣式不會有任何變化。這裡我同時設定了 top 和 left 屬性來改變它的位置。
現在它的效果如圖所示：
現在，第三段從原來的元素（body）中掙脫了出來，與它在文件中的預設位置相比向下移動了25畫素，向右移動了30畫素。
需要注意的是，除了這個元素自己相對於原始位置挪動了一下以外，頁面沒有任何改變。這個元素原來佔據的空間沒有動，其他元素也沒動。
這時，如果不想第四段被它擋住，可以給第四段設定一個 margin-top 值。
絕對定位（absoulte）
絕對定位跟靜態定位和相對定位相比，它會把元素徹底從文件流中拿出來。
我們把 position 改為絕對定位看一下：
p#specialpara {
position: absoulte;
top: 25px;
left: 30px;
}複製程式碼效果如圖：
可以看到，第三段原來的位置被回收了。這說明絕對定位的元素脫離了常規文件流，它現在是相對於頂級元素 body 在定位。
現在就涉及到一個概念：定位上下文，這個後邊說，先繼續看最後一種定位方式：固定定位。
盒子位移屬性是如何工作？盒子的位移屬性有四個“top、right、bottom和left”，用來指定元素的定位位置和方向。這些屬性只能在元素的“position”屬性設定了“relative、absolute和fixed”屬性值，才生效。
對於相對定位元素，這些屬性的設定讓元素從預設位置移動。例如，top設定一個值“20px”在一個相對定位的元素上，這個元素會在原來位置向下移動“20px”。
對於絕對定位和固定定位，這些屬性指定了元素與父元素邊緣之間的距離，例如，絕對定位的元素設定一個“top”值為“20px”，將使絕對定位元素相對於其設定了相對定位的祖先元素頂部邊緣向下移動“20px”，反之，如果設定一個“top”值為“20px”，將使絕對定位元素相對於其設定了相對定位的祖先元素頂部邊緣向上移動“20px”。（絕對定位的參考點是其祖先元素設定了“relative”或者“absolute”值）。
事實上，一個相對定位元素同時設定了“top”和“bottom”位移屬性值，實際上“top”優先順序高於“bottom”。然而，一個相對定位元素同時設定了“left”和“right”位移屬性，他們的優先順序取決於頁面使用的是哪種語言，例如，如果你的頁面是英文頁面，那麼“left”位移屬性優先順序高，如果你的頁面是阿拉伯語，那麼“right”的位移屬性優先順序高
固定定位（fixed）
固定定位與絕對定位類似，我們先看下把定位改為相對定位的效果：
p#specialpara {
position: fixed;
top: 25px;
left: 30px;
}複製程式碼效果如圖：
這樣看效果和絕對定位完全一致，但是固定定位的定位上下文是
瀏覽器視窗，她並不會隨頁面滾動。
以下是使用相對定位和固定定位的圖示：
固定頁頭和頁尾
固定定位最常見的一種用途就是在頁面中建立一個固定頭部、或者腳部、或者固定頁面的一個側面。就算是使用者移動瀏覽器的滾動條，還是會固定在頁面。
現在我們來看下定位上下文。
定位上下文
把元素的 position 屬性設定為 relative、absolute或 fixed 後，可以使用 top、right、bottom 和 left 屬性，相對於另一個元素移動該元素的位置。這裡另一個元素就是當前元素的定位上下文。
我們在介紹絕對定位的時候說過，絕對定位元素預設的定位上下文是 body，這是因為 body 是標記中所有元素唯一的祖先元素。不過，如果把他相應的元素設定為 relative，絕對定位元素的任何祖先元素都可以成為它的定位上下文。
比如：
<body>
<div id="outer">
<div id="inner"> 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.</div>
</div>
</body>複製程式碼css 樣式如下：
div#outer {
width:250px;
margin:100px 40px;
border-top:3px solid red;
}
div#inner {
top:10px;
left:20px;
background:#DDD;
}複製程式碼結果如圖：
這裡內部和外部的 div 都是是靜態定位，不存在誰是誰的定位上下文這個問題，所以 top 和 left 屬性並沒有生效。
下面我們把內部 div 設定為絕對定位，來看一下變化。
div#inner {
top:10px;
left:20px;
background:#DDD;
}複製程式碼這是效果如圖：
這裡由於不存在相對定位的其他祖先元素可以作為定位上下文，絕對定位只能相對於 body 定位。
事實上，只要把元素的外邊距和內邊距設定好，多數情況下使用靜態定位就可以實現頁面佈局了。
除非真正需要那麼做，否則不要輕易修改元素的 position 屬性。
現在我們把外部 div 的 position 設定為 relative：
div#outer {
position: relative;
width:250px;
margin:100px 40px;
border-top:3px solid red;
}複製程式碼
外部 div 改為相對定位之後，後代中絕對定位的元素就會按照 top 和 left 屬性的設定，相對於外部 div 定位。此時內部 div的 top 和 left 屬性參照的就是外部 div。
最後我們說一下和定位相關的顯示屬性。
顯示屬性
所有的元素都有display屬性。display 屬性有兩個最常用的值：block（塊級元素）和inline（行內元素）。
- 塊級元素：比如段落、標題、列表等，在瀏覽器中上下堆疊顯示。
- 行內元素：比如 a、span、和 img，在瀏覽器中左右並排顯示，只有前一行沒有空間時才會顯示對下一行。
塊級元素和行內元素是可以互相轉化的：
/*預設為塊級元素*/
p {display: inline;}
/*預設為行內元素*/
a {display: block;}複製程式碼display 還有一個屬性值：
none。把display設定為 none，該元素及所有包含在其中的元素，都不會在頁面中顯示。它們原來佔據的空間也會被回收
相對的屬性是visibility，這個屬性常用的值是 visible（預設）和 hidden。把元素的 visibility 設定為 hidden，元素會隱藏，但它佔據的空間仍然存在。
我們上一篇 CSS入門指南-2：盒子模型、浮動和清除 中提到的 clearfix 類就用到了這個屬性，在那裡我們會新增一個塊級元素，然後把內容隱藏，以用來清除浮動。clearfix 的樣式如下：
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}複製程式碼參考連結
最後，感謝女朋友支援。
| 歡迎關注(April_Louisa) | 請我喝芬達 |
|---|---|
 |
 |