首頁  >  文章  >  web前端  >  CSS定位position的技法

CSS定位position的技法

高洛峰
高洛峰原創
2017-02-27 09:38:251510瀏覽

本文針對CSS常用的6個屬性進行探究,大家一定會對這篇文章滿意的。

1.position:static

static屬性是position的預設值,也就是說,當一個元素沒有為其設定position屬性時,它的預設值就是static。

2.position:absolute

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

3.position:relative

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

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

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

4.position:fixed

fixed定位用的不多,但它非常適合固定模式的部分製作,例如頂部選單。定義了fixed屬性後,元素的位置不會隨著任何行為而改變。

5.relative+position

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

<span style="white-space:pre">    </span>#p-1 {     
             position:relative;     
            }     
            #p-1a {     
             position:absolute;     
             top:0;     
             rightright:0;     
             width:200px;     
            }     
            #p-1b {     
             position:absolute;     
             top:0;     
             left:0;     
             width:200px;     
            }

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

6.clear:both清除浮動

有的時候定位會出現塌陷現象,即子元素在父元素中,但是父元素的大小不會隨著子元素的大小而被“”撐開“,導致了父元素的塌陷效果。這種bug的出現是由於子元素設定了float屬性,導致父元素的坍塌。要想解決這種bug,需要為父元素設定清除浮動。

更多CSS定位position的技法相關文章請關注PHP中文網!
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn