CSS之position詳解

時間 2019-11-16

標籤 css position 詳解欄目 CSS 简体版

原文原文鏈接

定義和用法

position屬性規定元素的定位類型。這個屬性定義創建元素佈局所用的定位機制。任何元素均可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素自己是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。　　
position屬性有五個可選值，分別是absolute、fixed、relative,static,inherit.css

absolute: 生成絕對定位的元素，相對於static定位之外的第一個父元素進行定位。元素的位置經過left,top,right以及bottom屬性進行規定。
fixed: 生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過left、top、right以及bottom屬性進行規定。
relative: 生成相對定位的元素，相對於其正常位置進行定位。
static: 默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit: 規定應該從父元素繼承 position 屬性的值。

relative

relative是相對於其正常文本流中的位置進行偏移。以下代碼：html

<html lang="en">
        <head>
            <style type="text/css">
               #item1 {
                   width:100px;
                   height:100px;
                   background-color:green;
               }
               #item2 {
                   width:100px;
                   height:100px;
                   background-color:red;
               }
             </style>
        
        </head>
        <body>
               <div id="content">
                <div id="item1" >item1</div>
                <div id="item2">item2</div>
            </div>
        </body>
    </html>

上述代碼顯示結果以下：
瀏覽器

若把上述代碼中css樣式文件改成：佈局

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

顯示結果以下：
spa

總結：relative是相對正常文檔流的位置進行偏移，原先佔據的位置依然存在，也就是說它不會影響後面元素的位置。left表示相對原先位置右邊進行偏移，top表示相對原先位置下邊進行偏移。當left和right同時存在，僅left有效，當top和bottom同時存在僅top有效。relative的偏移是基於對象的margin左上側的。3d

absolute

爲了便於觀察，現將上述原始網頁代碼最外層div加上margin值。code

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

正常顯示以下：

當修改css樣式文件以下時：htm

#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屬性值爲默認值時（static）,absolute是相對於瀏覽器窗口進行定位的。
若是設置content的position屬性值爲非默認值，那麼absolute就是相對於該父級元素進行定位：blog

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

顯示效果以下圖所示：
　　
當修改css樣式以下時：

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

顯示結果爲：
　　

注意到變化了嗎，當把外層div設置爲absolute時，外層div寬度由原來的100%變爲auto.
當把一個元素position屬性設置爲absolute或fixed的時候，會發生三件事：

把該元素往 Z 軸方向移了一層，元素脫離了普通流，因此再也不佔據原來那層的空間，還會覆蓋下層的元素。
該元素將變爲塊級元素，至關於給該元素設置了 display: block;（給一個內聯元素，如 <span> ，設置 absolute 以後發現它能夠設置寬高了）。
若是該元素是塊級元素，元素的寬度由原來的 width: 100%（佔據一行），變爲了 auto。

當修改css樣式文件以下時：

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

顯示效果以下：
　　