CSS的position定位屬性在使用的重點有哪些

這期內容當中小編將會給大家帶來有關CSS的position定位屬性在使用的重點有哪些，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

關于CSS定位，有人很多時候都是隨便用用，符合自己的要求就行。但是CSS中的position等屬性確實有很多需要認真考究的地方。

1.position:static
static屬性是position的默認值，也就是說，當一個元素沒有為其設定position屬性時，它的默認值就是static。

2.position:absolute
這是一個經常會被用到的position屬性值。如果為某個元素設定了absolute，則該元素脫離原來的文檔流。形象一些說，比如a元素被定義了position:absolute，那么這個元素就不會與這個頁面中的其他元素發生位置上的關系，而是凌駕于整個頁面之上的漂浮狀態。頁面中的其他元素的位置變化、大小變化等，都不會影響a元素的位置，相當于一個局外人。

3.position:relative
relative是最有用的定義方法。設置了relative屬性表示，該元素相對于自己原來位置發生的變化。比如，我們定義了一個b元素，給它設定如下css樣式：

CSS Code復制內容到剪貼板

1. 
   

2. #b{     
       position: relative;     
       width:100px;     
       height:100px;     
       top:100px;     
   }

該段代碼定義的b元素，它的位置為相對于沒有定義position屬性的位置向下移動100px的距離。relative屬性值的定義就是這樣的定位模式。

4.position:fixed
fixed定位用的不多，但是它非常適用于固定模式的部分制作，比如頂部菜單。定義了fixed屬性后，元素的位置不會隨著任何行為發生變化。

5.relative+position
同時使用這兩個定位，是一種很常用的手法，新手也可能會在此處遇見很多麻煩。總體來說，如果一個元素絕對定位后，其參照物是以離自身最近元素是否設置了相對定位，如果有設置將以離自己最近元素定位，如果沒有將往其祖先元素尋找相對定位元素，一直找到html為止。比如，下面的代碼利用二者的結合實現了一個兩列布局;

CSS Code復制內容到剪貼板

1. #div-1
    {     
                position:relative;     
   }     
               #div-1a
    {     
                position:absolute;     
                top:0;     
                rightright:0;     
                width:200px;     
   }     
               #div-1b 
   {     
                position:absolute;     
                top:0;     
                left:0;     
                width:200px;     
    }

內部的兩個子div會根據其外部定位為relative的元素為參照進行絕對定位。

6.clear:both清除浮動
有的時候定位會出現塌陷現象，即子元素在父元素中，但是父元素的大小不會隨著子元素的大小而被“”撐開“，導致了父元素的塌陷效果。這種bug的出現是由于子元素設定了 float屬性，導致父元素的坍塌。要想解決這種bug，需要為父元素設定清除浮動。示例代碼如下：

CSS Code復制內容到剪貼板

2. #div-1a 
   {     
                float:left;     
                width:190px;     
    }     
               #div-1b
    {     
                float:left;     
                width:190px;     
    }     
               #div-1c
    {     
                clear:both;     
    }

上述就是小編為大家分享的CSS的position定位屬性在使用的重點有哪些了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。