css定位詳解：css中定位類型

定位的作用

定位也是用來布局的，它有兩部分組成：定位模式和邊偏移。

邊偏移

簡單說，我們定位的盒子，是通過邊偏移來移動位置的。在CSS中，通過top、bottom、left和right屬性定義元素的邊偏移

定位模式(position)

在CSS中，通過position屬性定義元素的定位模式，語法如下：

選擇器 { position: 屬性值; }

定位模式是有不同分類的，在不同情況下，我們用到不同的定位模式。

1.靜態(tài)定位(static)-了解

·靜態(tài)定位是元素的默認(rèn)定位方式，無定位的意思。它相當(dāng)于border里面的none，不要定位的時候用。

·靜態(tài)定位 按照標(biāo)準(zhǔn)流特性擺放位置，它沒有邊偏移。

·靜態(tài)定位在布局時我們幾乎不用的

2.相對定位(relative)-重要

相對定位是元素相對于它原來在標(biāo)準(zhǔn)流中的位置來說的。

效果圖：

相對定位的特點：

·相對于自己原來在標(biāo)準(zhǔn)流中位置來移動的

·原來在標(biāo)準(zhǔn)流的區(qū)域繼續(xù)占有，后面的盒子仍然以標(biāo)準(zhǔn)流的方式對待它。

3.絕對定位(absolute) - 重要

絕對定位是元素以帶有定位的父級元素來移動位置 (拼爹型)

·完全脫標(biāo)——完全不占位置;

·父元素沒有定位，則以瀏覽器為準(zhǔn)定位(Document 文檔)。

·父元素要有定位

·將元素依據(jù)最近的已經(jīng)定位(絕對、固定或相對定位)的父元素(祖先)進(jìn)行定位。

絕對定位的特點：(務(wù)必記住)

·絕對是以帶有定位的父級元素來移動位置(拼爹型)如果父級都沒有定位，則以瀏覽器文檔為準(zhǔn)移動位置

·不保留原來的位置，完全是脫標(biāo)的。

因為絕對定位的盒子是拼爹的，所以要和父級搭配一起來使用。

定位口訣——子絕父相

剛才咱們說過，絕對定位，要和帶有定位的父級搭配使用，那么父級要用什么定位呢?

子絕父相——子級是絕對定位，父級要用相對定位。子絕父相是使用絕對定位的口訣，要牢牢記住!

觀察下圖，思考一下在布局時，左右兩個方向的箭頭圖片以及父級盒子的定位方式。

分析：

1.方向箭頭疊加在其他圖片上方，應(yīng)該使用絕對定位，因為絕對定位完全脫標(biāo)，完全不占位置。

2.父級盒子應(yīng)該使用相對定位，因為相對定位不脫標(biāo)，后續(xù)盒子仍然以標(biāo)準(zhǔn)流的方式對待它。如果父級盒子也使用絕對定位，會完全脫標(biāo)，那么下方的廣告盒子會上移，這顯然不是我們想要的。

結(jié)論：父級要占有位置，子級要任意擺放，這就是子絕父相的由來。

4. 固定定位(fixed)-重要

固定定位是絕對定位的一種特殊形式： 如果說絕對定位是一個矩形那么固定定位就類似于正方形

1. 完全脫標(biāo)——完全不占位置;

2. 只認(rèn)瀏覽器的可視窗口 —— `瀏覽器可視窗口 + 邊偏移屬性` 來設(shè)置元素的位置;

·跟父元素沒有任何關(guān)系;單獨使用的

·不隨滾動條滾動。

猜你喜歡：

CSS選擇器用法大全

unicode字體是什么?

CSS是什么意思？史上最詳細(xì)介紹

CSS3相比CSS有哪些優(yōu)勢？

什么是HTML，什么是H5？

傳智教育web前端開發(fā)培訓(xùn)課程