CSS之position詳解

PiscesYE 發布于2019-08-29 13:11 / 3299人閱讀

摘要：元素的位置通過以及屬性進行規定。生成相對定位的元素，相對于其正常位置進行定位。規定應該從父元素繼承屬性的值。表示相對原先位置右邊進行偏移，表示相對原先位置下邊進行偏移。當和同時存在，僅有效，當和同時存在僅有效。

定義和用法

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

absolute: 生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。元素的位置通過left,top,right以及bottom屬性進行規定。

fixed: 生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過left、top、right以及bottom屬性進行規定。

relative: 生成相對定位的元素，相對于其正常位置進行定位。

static: 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

inherit: 規定應該從父元素繼承 position 屬性的值。

relative

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

上述代碼顯示結果如下：

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

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

顯示結果如下：

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

absolute

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

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

正常顯示如下：

當修改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屬性值為默認值時（static）,absolute是相對于瀏覽器窗口進行定位的。
如果設置content的position屬性值為非默認值，那么absolute就是相對于該父級元素進行定位：

#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;（給一個內聯元素，如，設置 absolute 之后發現它可以設置寬高了）。

如果該元素是塊級元素，元素的寬度由原來的 width: 100%（占據一行），變為了 auto?！　?/p>

當修改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;
}

顯示效果如下：
　　

由此可見，如果parent設定了margin，border，padding等屬性，那么這個定位點將忽略padding，將會從padding開始的地方(即只從padding的左上角開始)進行定位，這與我們會想當然的以為會以margin的左上端開始定位的想法是不同的。

fixed

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

GPU云服務器云服務器 position詳解 position，css position屬性，css position()

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112428.html

前端技術之_CSS詳解第六天--完結

前端技術之_CSS詳解第六天--完結一、復習第五天的知識 a標簽的偽類4個：　　a:link 沒有被點擊過的鏈接　　a:visited 訪問過的鏈接　　a:hover 懸停　　a:active 按下鼠標不松手順序就是“love hate”準則。可以簡寫： 1 a{ 3 } 4 a:hover{ 6 } background系列屬性，CSS2.1層面 ...

番茄西紅柿 2019-04-23 13:44 評論0 收藏0
前端技術之_CSS詳解第五天

摘要：前端技術之詳解第五天一行高和字號行高中，所有的行，都有行高。微軟雅黑我們一定要將標簽寫在前面，這些偽類寫在后面。也就是說，標簽涵蓋了的狀態。表示三原色紅綠藍。進制表示法，也是兩位兩位看，看，但是沒有逗號隔開。前端技術之_CSS詳解第五天一、行高和字號 1.1 行高 CSS中，所有的行，都有行高。盒模型的padding，絕對不是直接作用在文字上的，而是作用在“行”上的...

番茄西紅柿 2019-04-23 13:44 評論0 收藏0
深入CSS之外邊距折疊(margin collapse)詳解

摘要：發生外邊距折疊的條件是什么垂直方向上相鄰的兩個元素這種情況很好理解，就是上面的例子中給出的情況。外邊距折疊后的大小兩個相同大小的正數取某個外邊距的值。即與發生折疊，折疊后的值為。根據塊級格式化上下文來阻止外邊距折疊。什么是外邊距折疊準確來說，外邊距折疊應該叫垂直外邊距折疊，因為只會發生在垂直方向上，而水平方向上不會發生。對于以下簡單的html代碼和css代碼，請問top塊和bo...

ctriptech 2019-08-30 15:53 評論0 收藏0
CSS動畫之旋轉魔方輪播

摘要：關于的詳細講解張鑫旭一個基本的立方體就需要結合以上三點屬性來實現。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續深入學習方面的知識嘞本文參考內容關于的詳細講解張鑫旭詳解徹底理解和的區別的原始出處很久沒有回頭來復習CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關的知識點,因為之前只是用過...

leone 2019-08-29 15:10 評論0 收藏0
CSS動畫之旋轉魔方輪播

摘要：關于的詳細講解張鑫旭一個基本的立方體就需要結合以上三點屬性來實現。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續深入學習方面的知識嘞本文參考內容關于的詳細講解張鑫旭詳解徹底理解和的區別的原始出處很久沒有回頭來復習CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關的知識點,因為之前只是用過...

LittleLiByte 2019-08-02 10:18 評論0 收藏0