css絕對(duì)定位和相對(duì)定位【CSS定位介紹】

定位的作用

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

邊偏移

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

定位模式(position)

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

選擇器 { position: 屬性值; }

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

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

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

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

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

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

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

效果圖：

相對(duì)定位的特點(diǎn)：

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

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

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

絕對(duì)定位是元素以帶有定位的父級(jí)元素來移動(dòng)位置 (拼爹型)

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

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

·父元素要有定位

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

絕對(duì)定位的特點(diǎn)：(務(wù)必記住)

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

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

因?yàn)榻^對(duì)定位的盒子是拼爹的，所以要和父級(jí)搭配一起來使用。

定位口訣——子絕父相

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

子絕父相——子級(jí)是絕對(duì)定位，父級(jí)要用相對(duì)定位。子絕父相是使用絕對(duì)定位的口訣，要牢牢記住!

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

分析：

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

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

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

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

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

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

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

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

·不隨滾動(dòng)條滾動(dòng)。

猜你喜歡：

CSS浮動(dòng)元素有什么特點(diǎn)？

css陰影效果屬性：box-shadow屬性詳解

CSS中有多少種清除浮動(dòng)的方法？哪種更常用？

CSS中px、em、rem有什么區(qū)別和不同？？

黑馬程序員HTML&JS+前端培訓(xùn)課程