教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢/投訴熱線:400-618-4000

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

更新時(shí)間:2021年08月30日16時(shí)20分 來源:傳智教育 瀏覽次數(shù):

定位的作用

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


邊偏移

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

邊偏移屬性 示例 描述
top top: 80px 頂端偏移量,定義元素相對(duì)于其父元素上邊線的距離。
bottom bottom: 80px 底部偏移量,定義元素相對(duì)于其父元素下邊線的距離。
left left: 80px 左側(cè)偏移量,定義元素相對(duì)于其父元素左邊線的距離。
right right: 80px 右側(cè)偏移量,定義元素相對(duì)于其父元素右邊線的距離。
定位的盒子有了邊偏移才有價(jià)值。一般情況下,凡是有定位地方必定有邊偏移。

定位模式(position)

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

選擇器 { position: 屬性值; }

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

語義
static 靜態(tài)定位
relative 相對(duì)定位
absolute 絕對(duì)定位
fixed 固定定位


CSS定位模式

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ì)定位

相對(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 文檔)。

CSS絕對(duì)定位

·父元素要有定位

·將元素依據(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í)盒子的定位方式。

子絕父相

CSS定位

分析:

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選擇器用法大全

unicode字體是什么?

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

CSS3相比CSS有哪些優(yōu)勢(shì)?

什么是HTML,什么是H5?

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

0 分享到:
和我們?cè)诰€交談!