【CSS】【11】CSS盒子的定位

技術小胖子發表於2017-11-10
CSS
在CSS中有一個非常重要的屬性Position，然而要使用CSS進行定位操作，並不僅僅通過這個屬性來實現，二者不要混淆。先看一段程式碼：
一、relative演示
HTML部分程式碼：
<div class=”father”>

     <div class=”son”>Box-1</div>

</div>
CSS部分程式碼：
.father

{

    background-color:#669999;

    border:1px dashed #000000;

    padding:10px;

}

.son

{

    background-color:#CCCC00;

    border:1px dashed #000000;

    padding:10px;

}
頁面效果：

215301826.jpg

   從CSS上看沒有對盒子設定任何浮動屬性和定位屬性，所以頁面展示效果就是標準流下的巢狀效果。這種效果其實就是position屬性的預設值static的效果，static即為盒子position屬性的預設值，它表示盒子在標準流或浮動方式下的佈局。

修改.son程式碼：

.son

{

    background-color:#CCCC00;

    border:1px dashed #000000;

    padding:10px;
    position:relative;

    left:30px;

    top:30px;
}

頁面效果：

215315373.jpg

   這裡設定Box-1相對於它原來位置向左和向下偏移了各30畫素，而不是相對於父div邊框，即效果圖中標出的白色雙向箭頭的距離，這點十分重要。所以relative常以標準的排版方式為基礎，然後使盒子相對於它在原來的標準位置偏移指定的距離。為了解釋清楚這件事，請看下圖：

215328694.jpg

   在這個圖中，三個盒子均設定了浮動方式，由於對Box-2指定了position為relative，然後相對於它自己原來的位置向右下各偏移30畫素，所以產生了此效果，但在Box-3的眼中Box-2還在它原來的位置，而不是相對移動之後的位置。

二、absolute演示

HTML部分程式碼：

<div class=”father”>

  <div>Box-1</div>

  <div class=”son”>Box-2</div>

  <div>Box-3</div>

</div>

CSS部分程式碼：

.father

{

    background-color:#669999;

    border:1px dashed #000000;

    padding:10px;

}

.father div

{

    background-color:#CCCC00;

    border:1px dashed #000000;

    padding:10px;

}

頁面效果：

215343188.jpg

增加CSS程式碼：

.son

{

   position:absolute;

   top:0px;

   right:0px;

}

頁面效果：

215355999.jpg

此時Box-2脫離了標準流，跑到了瀏覽器的右上角，那麼約對定位absolute就意味著相對於瀏覽器的定位呢？答案是NO。我們修改father的程式碼，增加一個定位屬性，但大小和位置不變：

.father

{

    background-color:#669999;

    border:1px dashed #000000;

    padding:10px;
position:relative;

}

再看頁面效果：

215407205.jpg

   此時會發現Box-2這次跑到了父div的右上角？這是為什麼呢？它是以它的包含框為基準，檢視的父親是否有設定定位屬性，若父親有定位屬性則以父親為參考進行移動，若父親沒有設定定位屬性就去檢視它的爺爺，依次類推，若所有的祖先均沒有設定定位屬性，則以瀏覽器為參考進行移動。

   再強調一下對一個div設定為絕對定位，（1）它會脫離原來的標準流，其他的兄弟盒子則無視它的存在（2）以它的包含框為基準去檢視父類是否有定位屬性，以有定位屬性的祖先為參考進行移動，若祖先均無定位屬性則以瀏覽器為參考進行移動。

三、Fixed演示

HTML部分程式碼：

<div class=”father”>

  <div>Box-1</div>

  <div class=”son”>Box-2</div>

  <div>Box-3</div>

</div>

CSS部分程式碼：

.father

{

    background-color:#669999;

    border:1px dashed #000000;

    padding:10px;

}

.father div

{

    background-color:#CCCC00;

    border:1px dashed #000000;



    padding:10px;
}
.son
{
position:fixed;
    top:0px;
    right:0px;
}

頁面效果：

215422658.jpg

   此時故意把瀏覽器視窗拖的這樣小，然後向下拉動右側滾動條，發現Box-2始終在瀏覽器的右上角，所以Fixed表示固定定位，它和絕對定位類似，只是以瀏覽器視窗為基準進行定位。

   大家瀏覽網頁時，常比較討厭的廣告始終佔據網頁的右側，去也去不掉，其定位就是如此。




     本文轉自qingkechina 51CTO部落格，原文連結：http://blog.51cto.com/qingkechina/1261757，如需轉載請自行聯絡原作者




相關文章