CSS經過設置position定位的三種經常使用定位

　　CSS中能夠經過設置爲元素設置一個position屬性值，從而達到將不一樣的元素顯示在不一樣的位置，或者固定顯示在某一個位置，或者顯示在某一層頁面之上。

position的值能夠設爲relative，absolute，fixed，static。

HTML代碼裏定義兩個區塊：

1 <div class="box">
2     <div class="box1"></div>
3 </div>

　　1.相對定位：

1 .box {
2     width: 50px;
3     height: 50px;
4     position: relative;
5     top: 50px;
6     left: 10px;
7 }

以上代碼將實現將box以box最初的位置向右移動50px，向下移動10px。

　　2.絕對定位：

1 .box1 {
2     width: 10px;
3     height: 20px;
4     position: absolute;
5     top: 10px;
6     left: 10px;
7 }

以上代碼將實現將box1的位置以當前的視口位置的原點爲基準位置進行移動相應得距離；

若是將box1的父級設置了relative，那麼box1將會以box的原點進行位移。

 1 .box {
 2     position: relative;
 3 }
 4 .box1 {
 5     width: 10px;
 6     height: 20px;
 7     position: absolute;
 8     top: 10px;
 9     left: 10px;
10 }

　　3.固定定位：

1 .box {
2     width: 50px;
3     height: 50px;
4     position: fixed;
5     top: 20px;
6     left: 0px;
7 }

以上代碼將會將box固定在視窗的距離頂部20px的左側邊緣位置。

使用注意點：

1.絕對定位會使元素脫離文檔流，位於定位元素後面的元素將會移動到該元素的位置去填補空白區域；

2.通常狀況下，絕對定位都會和ixnagdui相對一塊兒使用；

3.使用fixed和absolute時，必定要認清誰是基準位置。

實例：實現將圖片顯示在視窗的固定位置（不是頂部或者底部），不隨窗口的縮放而改變元素的相對位置。

1 <div class="aside-cover">
2     <div class="cover">
3          <div class="aside-left">
4               <img src="img/batlogoX.png" alt="left"/>
5          </div>
6     </div>
7 </div>

.cover {
    width: 500px;
    height: 364px;
    margin: auto;
    position: relative;
}
/*第二級子級絕對定位*/
.aside-left {
    width: 60px;
    height: 94px;
    position: absolute;
    top: 422px;
    left: -0.2%;
    overflow: hidden;
}
/*圖片相對定位*/
.aside-left img {
    position: relative;
    left: -64px;
    top: -125px;
}

經過以上代碼就能夠實現將想要顯示的圖片內容區域顯示在視窗的固定位置。