CSS定位元素--定位

CSS 佈局的核心是 position 屬性，對元素盒子應用這個屬性，能夠相對於它在常規文檔流中的位置從新定位。 position 屬性有 4 個值： static、relative、absolute、fixed，默認值爲 static。

靜態定位

static，默認展現的文檔流就是

相對定位

relative，相對的是它原來在文檔流中的位置（或者默認位置）。接下來，可使用 top、 right、bottom 和 left 屬性來改變它的位置了。但多數狀況下，只用 top 和 left 就能夠實現咱們想要的效果。

絕對定位

absolute，絕對定位跟靜態定位和相對定位比，絕對不同。由於絕對定位會把元素完全從文檔流中拿出來。

能夠看到元素以前佔據的空間被「回收了」。這說明，絕對定位的元素徹底脫離了常規文檔流，它如今是相對於頂級元素 body 在定位。而這天然而然就引出了一個關於定位的重要概念：定位上下文。

固定定位

fixed，從徹底移出文檔流的角度說，固定定位與絕對定位相似。

--但不一樣之處在於，固定定位元素的定位上下文是視口（瀏覽器窗口或手持設備的屏幕），所以它不會隨頁面滾動而移動。

--就是說固定定位是展現在窗口的固定位置，不隨下拉而上移或下動。固定定位並不經常使用，最多見的狀況是用它建立不隨頁面滾動而移動的導航元素。

--定位上下文

--絕對定位元素默認的定位上下文是 body。這是由於body 是標記中全部元素惟一的祖先元素。而實際上，絕對定位元素的任何祖先元素均可以成爲它的定位上下文，只要你把相應祖先元素的 position 設定爲 relative 便可。

--顯示屬性

把塊級元素變成行內元素（或者相反）的方法以下。

/*默認爲 block*/
p {display:inline;}
/*默認爲 inline*/
a {display:block;}

--display 屬性還有一個值有必要提一下，就是 none。把元素的 display 設定爲 none，該元素及全部包含在其中的元素，都不會在頁面中顯示。它們原先佔據的全部空間也都會被「回收」，就好像相關的標記根本不存在同樣。與此相對的是 visibility屬性，這個屬性最經常使用的兩個相對的值是 visible（默認值）和 hidden。把元素的visibility 設定爲 hidden，元素會隱藏，但它佔據的頁面空間仍然「虛位以待」。