詳解定位—>"position"

　　position是css中一個重要的屬性，他規定元素的定位類型，默認值爲static，他的值有5種，absolute，fixed，relative，static，inherit。接下來將詳細具體對每個值進行分析。

1.任性的absolute：

　　絕對定位。相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。設置此屬性值爲 absolute 會將對象拖離出正常的文檔流（即在文檔中已經不佔據位置）絕對定位,而不考慮它周圍內容的佈局。假如其餘具備不一樣 z-index 屬性的對象已經佔據了給定的位置，他們之間不會相互影響，而會在同一位置層疊，也就是說，absolute能夠無視本來被佔據的位置，任性到能夠在他想要佔據的位置顯示出來，還真是瀟灑啊~

　　他的根據父級對象來定位，若是父級沒有position定位，那麼他將以瀏覽器左上角爲原始點進行定位。若是父級有position定位，那麼他將以距他最經的父級元素的左上角爲原始點進行定位。

2。專注的fixed：

　　固定定位。相對於瀏覽器左上角定位，素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。當咱們須要使一個層相對於瀏覽器來自動調整該層的位置的時候，若是你使用position的absolute屬性來定位該層，你會發現absolute屬性並不能達到你想要的css效果，這時，就須要要用到fixed屬性來定位該層了。舉個例子：

<div class="div1">層1</div>
<div class="div2">層2</div>

css：

.div1{

　　background-color:#f00;

　　height:2000;

　　width:2000;

}

.div2:{

　　background-color:#3f6;

　　height:100px;

　　width:100px;

　　position:fixed;

　　left:50px;

　　top:50px;

}

效果圖：

不管上下左右滾動滾動條，層2 在瀏覽器頁面中相應的位置是不會變的，而這正是absolute作不到的。

3.relative

　　相對定位。生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20" 會向元素的left位置添加 20 像素。參照父級（最近）的內容區的左上角爲原始點結合TRBL屬性進行定位（或者說相對於被定位元素在父級內容區中的上一個元素進行偏移），無父級則以BODY的左上角爲原始點。相對定位是不能層疊的。在使用相對定位時，不管元素是否進行移動，元素依然佔據原來的空間。所以，移動元素會致使它覆蓋其餘框。

4.static

　　默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）

5.inherit

　　規定應該從父元素繼承 position 屬性的值。"inherit"不支持全部包括IE8和以前版本IE瀏覽器，IE九、IE10還沒測試過

　　咱們都知道absolute是絕對定位，relative是相對定位，可是這個絕對與相對是什麼意思呢？絕對是什麼地方的絕對，相對又是相對於什麼地方而言的呢？那他們又有什麼樣的特性，能夠作出什麼樣的效果呢？關於二者之間又有什麼樣的技巧呢？

　　通常來說，網頁居中的話用absolute就容易出錯，由於網頁一直是隨着分辨率的大小自動適應的，而absolute則會以瀏覽器的左上角爲原始點，不會由於分辨率的變化而變化位置。有時還須要依靠z-index來設定容器的上下關係，數值越大越在最上面，數值範圍是天然數。固然有一點要注意，父子關係是沒法用z-index來設定上下關係的，必定是子級在上父級在下。

　　設置此屬性值爲 relative 會保持對象在正常的HTML流中，可是它的位置能夠根據它的前一個對象進行偏移。在相對(relative)定位對象以後的文本或對象佔有他們本身的空間而不會覆蓋被定位對象的天然空間。與此不一樣的，在絕對(absolute)定位對象以後的文本或對象在被定位對象被拖離正常文檔流以前會佔有它的天然空間。放置絕對(absolute)定位對象在可視區域以外會致使滾動條出現。而放置相對(relative)定位對象在可視區域以外，滾動條不會出現。其實對於定位的主要問題是要記住每一個定位的意義。相對定位是「相對於「元素在文檔流中初始位置的，而絕對定位是」相對於「最近的已經定位的祖先元素。