css絕對定位和相對定位【CSS定位介紹】

定位的作用

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

邊偏移

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

定位模式(position)

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

選擇器 { position: 屬性值; }

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

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

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

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

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

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

相對定位是元素相對于它原來在標準流中的位置來說的。

效果圖：

相對定位的特點：

·相對于自己原來在標準流中位置來移動的

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

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

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

·完全脫標——完全不占位置;

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

·父元素要有定位

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

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

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

·不保留原來的位置，完全是脫標的。

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

定位口訣——子絕父相

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

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

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

分析：

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

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

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

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

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

1. 完全脫標——完全不占位置;

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

·跟父元素沒有任何關系;單獨使用的

·不隨滾動條滾動。

猜你喜歡：

CSS浮動元素有什么特點？

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

CSS中有多少種清除浮動的方法？哪種更常用？

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

黑馬程序員HTML&JS+前端培訓課程