您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)CSS的position定位屬性在使用的重點(diǎn)有哪些,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
關(guān)于CSS定位,有人很多時(shí)候都是隨便用用,符合自己的要求就行。但是CSS中的position等屬性確實(shí)有很多需要認(rèn)真考究的地方。
1.position:static
static屬性是position的默認(rèn)值,也就是說,當(dāng)一個(gè)元素沒有為其設(shè)定position屬性時(shí),它的默認(rèn)值就是static。
2.position:absolute
這是一個(gè)經(jīng)常會(huì)被用到的position屬性值。如果為某個(gè)元素設(shè)定了absolute,則該元素脫離原來的文檔流。形象一些說,比如a元素被定義了position:absolute,那么這個(gè)元素就不會(huì)與這個(gè)頁面中的其他元素發(fā)生位置上的關(guān)系,而是凌駕于整個(gè)頁面之上的漂浮狀態(tài)。頁面中的其他元素的位置變化、大小變化等,都不會(huì)影響a元素的位置,相當(dāng)于一個(gè)局外人。
3.position:relative
relative是最有用的定義方法。設(shè)置了relative屬性表示,該元素相對(duì)于自己原來位置發(fā)生的變化。比如,我們定義了一個(gè)b元素,給它設(shè)定如下css樣式:
CSS Code復(fù)制內(nèi)容到剪貼板
#b{ position: relative; width:100px; height:100px; top:100px; }
該段代碼定義的b元素,它的位置為相對(duì)于沒有定義position屬性的位置向下移動(dòng)100px的距離。relative屬性值的定義就是這樣的定位模式。
4.position:fixed
fixed定位用的不多,但是它非常適用于固定模式的部分制作,比如頂部菜單。定義了fixed屬性后,元素的位置不會(huì)隨著任何行為發(fā)生變化。
5.relative+position
同時(shí)使用這兩個(gè)定位,是一種很常用的手法,新手也可能會(huì)在此處遇見很多麻煩??傮w來說,如果一個(gè)元素絕對(duì)定位后,其參照物是以離自身最近元素是否設(shè)置了相對(duì)定位,如果有設(shè)置將以離自己最近元素定位,如果沒有將往其祖先元素尋找相對(duì)定位元素,一直找到html為止。比如,下面的代碼利用二者的結(jié)合實(shí)現(xiàn)了一個(gè)兩列布局;
CSS Code復(fù)制內(nèi)容到剪貼板
#div-1 { position:relative; } #div-1a { position:absolute; top:0; rightright:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }
內(nèi)部的兩個(gè)子div會(huì)根據(jù)其外部定位為relative的元素為參照進(jìn)行絕對(duì)定位。
6.clear:both清除浮動(dòng)
有的時(shí)候定位會(huì)出現(xiàn)塌陷現(xiàn)象,即子元素在父元素中,但是父元素的大小不會(huì)隨著子元素的大小而被“”撐開“,導(dǎo)致了父元素的塌陷效果。這種bug的出現(xiàn)是由于子元素設(shè)定了 float屬性,導(dǎo)致父元素的坍塌。要想解決這種bug,需要為父元素設(shè)定清除浮動(dòng)。示例代碼如下:
CSS Code復(fù)制內(nèi)容到剪貼板
#div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; }
上述就是小編為大家分享的CSS的position定位屬性在使用的重點(diǎn)有哪些了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。