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;
}

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