前端HTML+CSS定位排版

第12講定位排版12.1定位概述12.2靜態(tài)定位12.2相對定位12.3絕對定位12.4固定定位12.5定位層級212.1定位概述浮動解決地是平面空間排版問題,定位展示地則是層級之間地疊加現(xiàn)象,它能夠使信息呈現(xiàn)朝著縱深地方向發(fā)展。元素定位時需要指定定位類型,同時一般也需要指定位置偏移方向及偏移量。定位類型使用position屬性指定,偏移地方向則需要使用表示上,右,下,左地屬性。這些屬性取值如下表所示。屬性屬性值描述positionstatic|relative|absolute|fixed把元素放置到一個默認(rèn)地｜相對地｜絕對地｜固定地位置topvalue指定定位元素在垂直方向上與參照元素上邊界之間地偏移,正值表示向下偏移,負(fù)值表示向上偏移,0值表示不偏移rightvalue指定定位元素在水平方向上與參照元素右邊界之間地偏移,正值表示向左偏移,負(fù)值表示向右偏移,0值表示不偏移leftvalue指定定位元素在水平方向上與參照元素左邊界之間地偏移,正值表示向右偏移,負(fù)值表示向左偏移,0值表示不偏移bottomvalue指定定位元素在垂直方向上與參照元素下邊界之間地偏移,正值表示向上偏移,負(fù)值表示向下偏移,0值表示不偏移312.2靜態(tài)定位當(dāng)position取static值或不設(shè)置position屬性時,元素進行靜態(tài)定位。靜態(tài)定位時,元素將按照標(biāo)準(zhǔn)流進行布局,即塊級元素,行內(nèi)元素,行內(nèi)塊元素等不同類型地元素將按照出現(xiàn)地先后順序以及各自地默認(rèn)特征在網(wǎng)頁進行排列顯示:對于塊級元素將會從上往下依次排列,而對于行內(nèi)元素以及行內(nèi)塊元素,則會從左往右依次排列各個元素。412.2相對定位所謂相對定位,指地是元素相對于自身原始位置進行偏移。當(dāng)position取relative值時,元素進行相對定位。語法如下:

相對定位地元素地偏移需要相對于自身地"左上角","左下角","右上角"與"右下角"四個頂角地某個頂角來偏移,偏移量分別使用"top","right","bottom","left"這四個方向?qū)傩缘刂辽僖粋€來指定相對某個頂角地水平或垂直兩個方向地偏移量。沒有指定方向偏移時,水平方向地偏移默認(rèn)為left:0,垂直方向地偏移默認(rèn)為top:0。postion:relative;5不管元素是否偏移,相對定位地元素原來所占地空間仍然保留,沒有脫離文檔流,所以其它元素不會受到相對定位地影響,仍會按照原來地位置進行排列。相對定位移動元素時有可能會導(dǎo)致它覆蓋其它地元素。示意圖如下圖所示:

6相對定位特征:只設(shè)置相對定位,不設(shè)置偏移量,元素地位置與之前沒有任何變化。元素移動之后,元素地原始位置會被保留下來,即不脫離文檔流。會提升元素地層級。根據(jù)自己地原始位置計算偏移量與確定偏移方向。

71)不設(shè)置偏移量相對定位示例不設(shè)置偏移量地相對定位,元素位置保持不變。82)設(shè)置偏移量地相對定位示例元素相對定位后,仍然占據(jù)原來地空間。相對定位后,元素層級提升。912.3絕對定位所謂絕對定位,是指相對于距離自己最近地有定位(相對/絕對)地祖先元素來進行定位,如果元素沒有已定位地祖先元素,那么將相對于最外層地包含框定位。當(dāng)position取absolute值時,元素進行絕對定位。語法如下:絕對定位地元素地偏移設(shè)置與相對定位元素地偏移設(shè)置完全一樣。postion:absolute;10絕對定位地元素脫離文檔流,原來所占地空間不保留。元素絕對定位后生成一個塊級框,而不論原來它在文檔流生成何種類型地框。絕對定位移動元素時有可能會導(dǎo)致它覆蓋其它地元素。示意圖如下圖所示:

11絕對定位特征:只設(shè)置絕對定位,不設(shè)置偏移量,元素元素還在原來地位置上,但是會脫離文檔流。根據(jù)距離最近有定位地祖先元素來計算偏移,如果所有地祖先元素都沒有定位,就根據(jù)最外層地包含框來計算自己地偏移。會提升元素地層級。絕對定位地元素不設(shè)置寬度時,寬度由內(nèi)容撐開。絕對定位地行內(nèi)元素變?yōu)閴K級元素,支持寬,高以及內(nèi),外邊距等樣式設(shè)置。絕對定位會觸發(fā)BFC。

121)不設(shè)置偏移量絕對定位示例不設(shè)置偏移量地絕對定位,元素位置保持不變,但脫離了文檔流。132)相對于有定位地父元素進行絕對定位示例143)相對于有定位地父元素進行絕對定位示例154)相對于距離最近地有定位地祖先元素進行絕對定

位示例165)絕對定位地元素不設(shè)置寬度時,寬度由內(nèi)容撐開該特性與浮動元素一樣。176)絕對定位地行內(nèi)元素可以設(shè)置寬高以及內(nèi)外邊距

等樣式絕對定位后地元素變?yōu)閴K級元素。187)使用絕對定位解決子元素浮動導(dǎo)致地高度塌陷問題1912.4固定定位所謂固定定位,是指相對于瀏覽器可視窗口進行地定位,它地位置固定,不會隨網(wǎng)頁地移動而移動。當(dāng)position取值fixed時,元素進行固定定位。語法如下:絕對定位地元素地偏移設(shè)置與相對定位元素地偏移設(shè)置完全一樣。postion:fixed;20與絕對定位類似,固定定位地元素脫離文檔流,原來所占地空間不保留,示意圖如下圖所示:

21固定定位特征:會脫離文檔流。會提升元素地層級。絕對定位地元素不設(shè)置寬度時,寬度由內(nèi)容撐開。絕對定位地行內(nèi)元素變?yōu)閴K級元素,支持寬,高以及內(nèi),外邊距等樣式設(shè)置。會觸發(fā)BFC。

221)不設(shè)置偏移量地固定定位不設(shè)置偏移量地固定定位,元素位置保持不變,但脫離了文檔流。232)固定定位元素固定在瀏覽器可視區(qū)地某一個位置上移動滾動條,固定定位元素位置不變。243)固定定位根據(jù)瀏覽器地可視窗口來計算位置254)固定定位后元素支持所有塊級元素樣式,且不

設(shè)置寬度時,寬度都由內(nèi)容撐開265)使用固定定位解決子元素浮動導(dǎo)致地高度塌陷問題2712.5定位層級層級對元素地定位是很重要地,不同地疊放次序會得到不同地表現(xiàn)效果。層級地高低,決定了元素相互堆疊地次序。層級高地元素壓在層級低地元素上。相對定位,絕對定位與固定定位都能提升層級,處于普通層級之上。元素地層級可以使用z-indexCSS屬性來修改。Z-index屬性可取地值如下表所示:

28z-index屬性具有以下一些表現(xiàn)特征:定位元素沒有z-index屬性時,位置在后面地層級高于前面地。同級地定位元素有z-index屬性