css定位詳解--相對定位、絕對定位與固定定位

這篇文章為大家帶來了關於css的相關知識，其中主要介紹了關於css的相對定位、絕對定位和固定定位的相關問題，css中的position屬性，position有四個值：relative（相對定位）、absolute（絕對定位）、static（靜態定位）和fixed（固定定位），透過top、left、bottom、right來調整元素位置，下面一起來看一下，希望對大家有幫助。

（學習影片分享：css影片教學、html影片教學）

一、什麼是定位？

css中的position屬性，position有四個值：relative（相對定位）、absolute（絕對定位）、static（靜態定位）和fixed（固定定位），透過top、left、bottom、right來調整元素位置

二、各屬性值的作用

#屬性值	作用	#備註
relative	相對定位	#參考元素本身
absolute	絕對定位	參考最近的祖先元素
static	靜態定位	基本定位規定
fixed	已固定定位	#參考瀏覽器視窗

1、相對定位

相對定位的偏移元素參考的是元素本身，不會使元素脫離文檔流，元素的初始位置佔據的空間會被保留

html程式碼：

css程式碼：

網頁效果：

可以看出相對定位是相對於元素本身來說，其中距離頂部30px，距離左邊20px，並且沒有脫離文檔流

2、絕對定位

#絕對定位是相對於已定位的最近的祖先元素，如果的最近的祖先元素沒有設定定位，那麼它的位置就相對於最初的包含區塊（body）

css程式碼：

網頁效果：

可以看到絕對定位脫離文件流，由於父級元素未進行定位，所以是以最初的包含區塊（ body）進行定位，現在將該元素的父級元素進行定位

css程式碼：

網頁效果：

這裡父級元素定位之後，該元素是以父級元素來進行定位

3、靜態定位

沒有特別的設定，不脫離文檔流，遵循基本的定位規定，不能透過z-index進行層次分級

css代碼：

# 網頁效果：

## 可以看出紅色區塊位置沒變，可以知道static（靜態，預設屬性）通常不會使用，position值一般為預設

4、固定定位

##固定定位相對於瀏覽器窗口，脫離文檔流，使用fixed的元素不會隨視窗的滾動而滾動

html代碼：

css代碼：

網頁效果（未設定固定定位)：

網頁效果（設定固定定位）

可以看出進行固定定位後，即使視窗進行滾動，紅色區塊的位置不變
三、相對和絕對定位

將三個色塊來區分相對定位和絕對定位

# 未進行定位時，預設網頁效果：

#1、相對定位

css程式碼：

網頁效果：

可以看出相對定位和預設定位效果是一樣的
2、絕對定位

css程式碼：

網頁效果：

這裡紅、黃、藍色塊重疊顯示了，即脫離文檔流
3、相對定位和絕對定位

為了使效果更加明顯，這裡將紅、黃、藍三色區塊進行一定程度的偏移量

（1）相對定位

css程式碼：

網頁效果：

（2）絕對定位

css程式碼：

網頁效果：

四、相對、絕對定位與浮動

絕對定位與浮動都脫離文件流程

1、相對定位

css程式碼：

# 網頁效果：

# #2、絕對定位

css程式碼：

網頁效果：

##3、浮動

css程式碼：

網頁效果：

可以看到浮動（float）為文字包圍紅色色塊，但文字與紅色色塊的距離過近，無法設定邊距
4、相對定位與浮動

css程式碼：

## 網頁效果：

相對定位與浮動結合可以設定文字與紅色色塊的邊距
5、絕對定位與浮動

css程式碼：

網頁效果：

五、z-index的使用

若要將下面的色塊中紅色色塊顯示在黃色色塊上面，可以使用z -index

css程式碼：

網頁效果：

可以看到紅色色塊顯示在紅色色塊上面，這裡z-index的數值為40,20,30，實際上網頁有時不只這些，可能上百，這裡只是為了方便顯示。

（學習影片分享：
css影片教學

、

html影片教學）

以上是css定位詳解--相對定位、絕對定位與固定定位的詳細內容。更多資訊請關注PHP中文網其他相關文章！