站長(zhǎng)資訊網(wǎng)本篇文章給大家?guī)?lái)了關(guān)于css的相關(guān)知識(shí)，其中主要介紹了關(guān)于css的相對(duì)定位、絕對(duì)定位和固定定位的相關(guān)問(wèn)題，css中的position屬性，position有四個(gè)值：relative（相對(duì)定位）、absolute（絕對(duì)定位）、static（靜態(tài)定位）和fixed（固定定位），通過(guò)top、left、bottom、right來(lái)調(diào)整元素位置，下面一起來(lái)看一下，希望對(duì)大家有幫助。
（學(xué)習(xí)視頻分享：css視頻教程、html視頻教程）
一、什么是定位？
css中的position屬性，position有四個(gè)值：relative（相對(duì)定位）、absolute（絕對(duì)定位）、static（靜態(tài)定位）和fixed（固定定位），通過(guò)top、left、bottom、right來(lái)調(diào)整元素位置
二、各個(gè)屬性值的作用
| 屬性值 | 作用 | 備注 |
|---|---|---|
| relative | 相對(duì)定位 | 參考元素本身 |
| absolute | 絕對(duì)定位 | 參考最近的祖先元素 |
| static | 靜態(tài)定位 | 基本定位規(guī)定 |
| fixed | 固定定位 | 參考瀏覽器窗口 |
1、相對(duì)定位
相對(duì)定位的偏移元素參考的是元素本身，不會(huì)使元素脫離文檔流，元素的初始位置占據(jù)的空間會(huì)被保留
html代碼：
css代碼：
網(wǎng)頁(yè)效果：
可以看出相對(duì)定位是相對(duì)于元素本身來(lái)說(shuō)，其中距離頂部30px，距離左邊20px，并且沒(méi)有脫離文檔流
2、絕對(duì)定位
絕對(duì)定位是相對(duì)于已定位的最近的祖先元素，如果的最近的祖先元素沒(méi)有設(shè)置定位，那么它的位置就相對(duì)于最初的包含塊（body）
css代碼：
網(wǎng)頁(yè)效果：
可以看到絕對(duì)定位脫離文檔流，由于父級(jí)元素未進(jìn)行定位，所以是以最初的包含塊（body）進(jìn)行定位，現(xiàn)在將該元素的父級(jí)元素進(jìn)行定位
css代碼：
網(wǎng)頁(yè)效果：
這里父級(jí)元素定位之后，該元素是以父級(jí)元素來(lái)進(jìn)行定位
3、靜態(tài)定位
沒(méi)有特別的設(shè)定，不脫離文檔流，遵循基本的定位規(guī)定，不能通過(guò)z-index進(jìn)行層次分級(jí)
css代碼：
網(wǎng)頁(yè)效果：
可以看出紅色塊位置沒(méi)變，可以知道static（靜態(tài)，默認(rèn)屬性）通常情況下不會(huì)使用，position值一般為默認(rèn)
4、固定定位
固定定位相對(duì)于瀏覽器窗口，脫離文檔流，使用fixed的元素不會(huì)隨窗口的滾動(dòng)而滾動(dòng)
html代碼：
css代碼：
網(wǎng)頁(yè)效果（未設(shè)定固定定位）：
網(wǎng)頁(yè)效果（設(shè)定固定定位）
可以看出進(jìn)行固定定位后，即使窗口進(jìn)行滾動(dòng)，紅色塊的位置不變
三、相對(duì)和絕對(duì)定位
將三個(gè)色塊來(lái)區(qū)別相對(duì)定位和絕對(duì)定位
未進(jìn)行定位時(shí)，默認(rèn)網(wǎng)頁(yè)效果：
1、相對(duì)定位
css代碼：
網(wǎng)頁(yè)效果：
可以看出相對(duì)定位和默認(rèn)定位效果是一樣的
2、絕對(duì)定位
css代碼：
網(wǎng)頁(yè)效果：
這里紅、黃、藍(lán)色塊重疊顯示了，即脫離文檔流
3、相對(duì)定位和絕對(duì)定位
為了使效果更加明顯，這里將紅、黃、藍(lán)三色塊進(jìn)行一定程度的偏移
（1）相對(duì)定位
css代碼：
網(wǎng)頁(yè)效果：
（2）絕對(duì)定位
css代碼：
網(wǎng)頁(yè)效果：
四、相對(duì)、絕對(duì)定位與浮動(dòng)
絕對(duì)定位和浮動(dòng)都脫離文檔流
1、相對(duì)定位
css代碼：
網(wǎng)頁(yè)效果：
2、絕對(duì)定位
css代碼：
網(wǎng)頁(yè)效果：
3、浮動(dòng)
css代碼：
網(wǎng)頁(yè)效果：
可以看到浮動(dòng)（float）為文字包圍紅色色塊，但文本與紅色色塊的距離過(guò)近，無(wú)法設(shè)定邊距
4、相對(duì)定位與浮動(dòng)
css代碼：
網(wǎng)頁(yè)效果：
相對(duì)定位和浮動(dòng)結(jié)合可以設(shè)定文本與紅色色塊的邊距
5、絕對(duì)定位和浮動(dòng)
css代碼：
網(wǎng)頁(yè)效果：
五、z-index的使用
若要將下面的色塊中紅色色塊顯示在黃色色塊上面，可以使用z-index
css代碼：
網(wǎng)頁(yè)效果：
可以看到紅色色塊顯示在紅色色塊上面，這里z-index的數(shù)值為40,20,30，實(shí)際上網(wǎng)頁(yè)有時(shí)不止這些，可能上百，這里只是為了方便顯示。
（學(xué)習(xí)視頻分享：css視頻教程、html視頻教程）
