web前端學習筆記(CSS盒子的定位)

OrangeAdmin發表於2013-09-23
Web前端筆記CSS

相對定位

      使用相對定位的盒子的位置常以標準流的排版方式為基礎，然後使盒子相對於它在原本的標準位置偏移指定的距離。相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。
      使用relative，即相對定位，除了將position屬性設定為relative之外，還需要指定一定的偏移量，水平方向透過left或者right屬性來指定，豎直方向透過top和bottom來指定。以下為後面實驗的基準程式碼。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>position屬性</title>
<style type="text/css">
body{
    margin:20px;
    font :Arial 12px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    padding:15px;
}
#block1{
    background-color:#fff0ac;
    border:1px dashed #000000;
    padding:10px;
}
</style>
</head>
<body>
    <div id="father">
        <div id="block1">Box-1</div>
    </div>
</body>
</html>

      這是一個很簡單的標準流方式的兩層的盒子，頁面的效果如下圖：

實驗一：一個子塊的情況 

      下面的CSS樣式程式碼中的Box-1處，將position屬性設定為relative，並設定偏移距離，程式碼如下： 

#block1 {
    backgroud-color: #fff0ac;
    border: 1px dashed #000000;
    padding: 10px;
    position: relative;
    left: 30px;
    top: 30px;
}

      下圖可以看出Box-1和原來的位置相比，它向右和向下分別移動了30畫素，也就是說，“left:30px”的作用就是使Box-1的新位置在它原來位置的左邊框右側30畫素的地方，“top:30px”的作用就是使Box-1的新位置在原來位置的上邊框下側30畫素的地方。

      這裡用到了top和left這兩個CSS屬性，實際上在CSS中一共有4個配合position屬性使用的定位屬性，除top和left之外，還有right和bottom。這4個屬性只有當position屬性設定為absolute、relative和fixed時才有效。而且，在position屬性取值不同時，它們的含義也不同。當position設定為relative時，它們表示各個邊界與原來位置的距離。
      top、right、bottom和left這4個屬性除了可以設定為絕對的畫素數，還可以設定為百分數。此時，可以看到子塊的寬度依然是未移動前的寬度，撐滿未移動前父塊的內容。只是向右移動了，右邊框超出了父塊。因此，還可以得出另一個結論，當子塊使用相對定位以後，它發生了偏移，即使移動到了父盒子的外面，父盒子也不會變大，就好像子盒子沒有變化一樣。類似的，如果將偏移的數值設定為：right:30px; bottom:30px，其效果圖如下：

      現在我們可以得到這樣的結論，使用相對定位的盒子，會相對於它原本的位置，透過偏移指定的距離，到達新的位置。而該相對定位的盒子則仍然位於標準流中，它對父塊沒有任何影響。 

實驗二：兩個子塊的情況 

      下面討論的是兩個子塊的情況。把上面的基礎程式碼改為如下程式碼，在父div中放兩個子div。首先對它們都不設定任何偏移。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<title>position屬性</title>
<style type="text/css">
body{
    margin:20px;
    font-family:Arial;
    font-size:12px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    padding:15px;
}
#father div{
    background-color:#fff0ac;
    border:1px dashed #000000;
    padding:10px;
}
#block1{
}
#block2{
}
</style>
</head>
<body>
    <div id="father">
        <div id="block1">Box-1</div>
        <div id="block2">Box-2</div>
    </div>
</body>
</html>

      效果圖顯示如下：

      從上面的程式碼中可以看出，現在對兩個子塊的設定還都空著。下面首先將Box-1盒子的CSS設定為：

#block1 {
    position: relative;
    bottom: 30px;
    right: 30px;
}

      將子塊1的position屬性設定成了relative，子塊2還沒有設定任何與定位相關的屬性。此時的效果如下圖，與前面的圖相比可以看到子塊1的位置以自身為基準向上和向左各偏移了30畫素。而子塊2和前面的圖相比沒有任何變化，就好像子塊1還在原來的位置上。

      這一次又驗證了前面實驗1中總結出的結論，並且需要進行一小點兒的改進。因為，使用相對定位的盒子不僅對父塊沒有任何影響，對兄弟盒子也沒有任何影響。那麼如果同時設定兩個子塊的position都設定為relative，情況又會如何呢？現在把子塊2也進行相應的設定，程式碼如下：

 

      上面的實驗是針對標準流方式進行的，實際上，對浮動的盒子使用相對定位也是一樣的，都會相對於原有的位置進行指定的偏移併到達新的位置，而這一偏移並不會對其後面的兄弟元素帶來任何的影響。

絕對定位

      在瞭解了相對定位之後，下面開始分析absolute定位方式，它表示絕對定位。透過上面的例子可以瞭解到position屬性需要透過配合偏移一定的距離來實現定位，而其中核心的問題就是以什麼作為偏移的基準。絕對定位，盒子的位置以它的包含框為基準進行偏移。絕對定位的盒子從標準流中脫離。這意味著它們對其後的兄弟盒子的定位沒有影響，其它的盒子就好像這個盒子不存在一樣。 以下為後面實驗的基準程式碼。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>absolute屬性</title>
<style type="text/css">
body{
    margin:20px;
    font-family:Arial;
    font-size:12px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    padding:15px;
}
#father div{
    background-color:#fff0ac;
    border:1px dashed #000000;
    padding:10px;
}
#block2{
}
</style>
</head>
<body>
    <div id="father">
        <div >Box-1</div>
        <div id="block2">Box-2</div>
        <div >Box-3</div>
    </div>
</body>
</html>

      效果圖如下。可以看到一個父div裡面有3個子div，都是標準流方式排列。

實驗三：使用絕對定位

      下面嘗試使用絕對定位，程式碼中找到對#block2的CSS設定位置，目前它還是空白的，下面將它改為：

#block2 {
    position: absolute;
    top: 30px;
    right: 30px;
}

      這是的效果如下圖，以瀏覽器視窗為基準，從右上角開始向下和向左各移動30畫素。

      是不是所有的絕對定位都以瀏覽器為基準來定位呢？答案是否定的，接下來對上面的程式碼做一處修改，為父div增加一個定位樣式，程式碼如下：

#father {
    background-color: #a0c8ff;
    border: 1px dashed #000000;
    padding: 15px;
    position: relative;
}

      如下圖所示效果發生了變化，偏移的距離沒有變化，但是偏移的基準不再是瀏覽器視窗，而是它的父div了。

      對於絕對定位的描述為：使用絕對定位的盒子以它的“最近”的一個“已經定位”的“祖先元素”為基準進行偏移。如果沒有已經定位的祖先元素，那麼會以瀏覽器視窗為基準進行定位。再有，絕對定位的框從標準流中脫離，這意味著它們對其後的兄弟盒子的定位沒有任何影響，其他的盒子就好像這個盒子不存在一樣。
      回到之前的實驗，最初的程式碼中，在父div沒有設定position屬性時，Box-2這個div的所有祖先都不符合“已經定位”的要求，因此它會以瀏覽器視窗為基準來定位。而當父div將position屬性設定為relative後，它就符合“已經定位”的要求了，它又是所有祖先中唯一一個已經定位的，也就滿足“最近”這個要求，因此就會以它為基準進行定位了。以後將絕對定位的基準稱為“包含塊”。

實驗四：絕對定位的特殊性質

      對於絕對定位，還有一個特殊性質需要介紹。見如下程式碼： 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{
    margin:0;
}
#outerBox {
    width: 200px;
    height: 100px;
    margin: 10px auto;
    background: silver;
}
#innerBox {
    position: absolute;
    top: 70px;
    width: 100px;
    height: 50px;
    background: orange;
}
</style>
</head>
<body>
    <div id="outerBox">
        <div id="innerBox"></div>
    </div>
</body>
</html>

      程式碼中，外面的盒子沒有設定position屬性，內部的盒子設定了絕對定位，但是隻在垂直方向指定了偏移量，沒有指定水平方向的偏移量，此時內部的盒子則因為設定了絕對定位屬性，而外層div沒有position屬性，所以的它的定位基準是瀏覽器視窗。但是又由於在水平方向上沒有設定偏移屬性，因此在水平方向它仍然會保持原來應該在的位置，它的左側與外層盒子的左側對齊。因為在垂直方向上設定了“top:70px”，所以距離瀏覽器視窗頂部為70畫素。

       由此實驗可知，如果設定了絕對定位，而沒有設定偏移屬性，那麼它仍然保持原有的位置。

固定定位：

       當position的屬性值為fixed，即固定定位。它與絕對定位有些類似，區別主要在於定位的基準不是祖先，而是瀏覽器視窗或其它顯示裝置視窗。也就是當訪問者拖動瀏覽器的視窗捲軸時，固定定位的元素相對於瀏覽器視窗的位置保持不變。

z-index空間位置： 

       z-index屬性用於調整定位時重疊塊的上下位置，與它的名稱一樣，想象頁面為x-y軸，垂直於頁面的方向為z軸，z-index值大的頁面位於其小的上方。z-index屬性的值為整數，可以是正數也可以是負數。當塊被設定了position屬性時，該值便可以設定各塊之間的重疊高低關係。預設的z-index值為0，當兩個塊的z-index值一樣時，將保持原有的高低覆蓋關係。 

注：該篇部落格源自《CSS設計徹底研究》中的第四章，書中的例子簡明扼要、通俗易懂，因此特copy下來與大家分享，同時也便於今後自己的線上查閱。

相關文章