CSS之position詳解

PiscesYE 發(fā)布于2019-08-29 13:11 / 3330人閱讀

摘要：元素的位置通過(guò)以及屬性進(jìn)行規(guī)定。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。規(guī)定應(yīng)該從父元素繼承屬性的值。表示相對(duì)原先位置右邊進(jìn)行偏移，表示相對(duì)原先位置下邊進(jìn)行偏移。當(dāng)和同時(shí)存在，僅有效，當(dāng)和同時(shí)存在僅有效。

定義和用法

position屬性規(guī)定元素的定位類型。這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過(guò)絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類型。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移?！　?br>position屬性有五個(gè)可選值，分別是absolute、fixed、relative,static,inherit.

absolute: 生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò)left,top,right以及bottom屬性進(jìn)行規(guī)定。

fixed: 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò)left、top、right以及bottom屬性進(jìn)行規(guī)定。

relative: 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。

static: 默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

inherit: 規(guī)定應(yīng)該從父元素繼承 position 屬性的值。

relative

relative是相對(duì)于其正常文本流中的位置進(jìn)行偏移。如下代碼：

上述代碼顯示結(jié)果如下：

若把上述代碼中css樣式文件改為：

     #item1 {
             width:100px;
             height:100px;
             background-color:green;
             }
     #item2 {
             width:100px;
             height:100px;
             background-color:red;
             position:relative;
             left:20px;
             top:20px;
             }

顯示結(jié)果如下：

總結(jié)：relative是相對(duì)正常文檔流的位置進(jìn)行偏移，原先占據(jù)的位置依然存在，也就是說(shuō)它不會(huì)影響后面元素的位置。left表示相對(duì)原先位置右邊進(jìn)行偏移，top表示相對(duì)原先位置下邊進(jìn)行偏移。當(dāng)left和right同時(shí)存在，僅left有效，當(dāng)top和bottom同時(shí)存在僅top有效。relative的偏移是基于對(duì)象的margin左上側(cè)的。

absolute

為了便于觀察，現(xiàn)將上述原始網(wǎng)頁(yè)代碼最外層div加上margin值。

#content {
         margin-left:100px;
         margin-top: 100px;
         }

正常顯示如下：

當(dāng)修改css樣式文件如下時(shí)：

   #item1 {
           width:100px;
           height:100px;
           background-color:green;
          }
   #item2 {
          width:100px;
          height:100px;
          background-color:red;
          position: absolute;
          left:20px;
          top:20px;
          }
    #content {
           margin-left:100px;
           margin-top: 100px;
          }

顯示結(jié)果如下：

由此可見(jiàn)當(dāng)父級(jí)元素的position屬性值為默認(rèn)值時(shí)（static）,absolute是相對(duì)于瀏覽器窗口進(jìn)行定位的。
如果設(shè)置content的position屬性值為非默認(rèn)值，那么absolute就是相對(duì)于該父級(jí)元素進(jìn)行定位：

#content {
                margin-left:100px;
                margin-top: 100px;
                position: relative
               }

顯示效果如下圖所示：
　　
當(dāng)修改css樣式如下時(shí)：

#item1 {
    width:100px;
    height:100px;
    background-color:green;
}
#item2 {
 width:100px;
 height:100px;
 background-color:red;
}
#content {
 margin-left:100px;
 margin-top: 100px;
 position:absolute;
 padding:20px;
 border:10px solid black;
}

顯示結(jié)果為：
　　

注意到變化了嗎，當(dāng)把外層div設(shè)置為absolute時(shí)，外層div寬度由原來(lái)的100%變?yōu)閍uto.
當(dāng)把一個(gè)元素position屬性設(shè)置為absolute或fixed的時(shí)候，會(huì)發(fā)生三件事：

把該元素往 Z 軸方向移了一層，元素脫離了普通流，所以不再占據(jù)原來(lái)那層的空間，還會(huì)覆蓋下層的元素。

該元素將變?yōu)閴K級(jí)元素，相當(dāng)于給該元素設(shè)置了 display: block;（給一個(gè)內(nèi)聯(lián)元素，如，設(shè)置 absolute 之后發(fā)現(xiàn)它可以設(shè)置寬高了）。

如果該元素是塊級(jí)元素，元素的寬度由原來(lái)的 width: 100%（占據(jù)一行），變?yōu)榱?auto?！　?/p>

當(dāng)修改css樣式文件如下時(shí)：

#item1 {
    width:100px;
    height:100px;
    background-color:green;
}
#item2 {
 width:100px;
 height:100px;
 background-color:red;
 position:absolute;
 left:20px;
 top:20px;
}
#content {
 margin-left:100px;
 margin-top: 100px;
 position:absolute;
 padding:20px;
 border:10px solid black;
}

顯示效果如下：
　　

由此可見(jiàn)，如果parent設(shè)定了margin，border，padding等屬性，那么這個(gè)定位點(diǎn)將忽略padding，將會(huì)從padding開(kāi)始的地方(即只從padding的左上角開(kāi)始)進(jìn)行定位，這與我們會(huì)想當(dāng)然的以為會(huì)以margin的左上端開(kāi)始定位的想法是不同的。

fixed

fixed是特殊的absolute，即fixed總是以body為定位對(duì)象的，按照瀏覽器的窗口進(jìn)行定位。