css相對定位、絕對定位和固定定位實例分析

這篇文章主要講解了“css相對定位、絕對定位和固定定位實例分析”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css相對定位、絕對定位和固定定位實例分析”吧！

一、什么是定位？

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

二、各個屬性值的作用

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相對定位、絕對定位和固定定位實例分析”的內容了，經過本文的學習后，相信大家對css相對定位、絕對定位和固定定位實例分析這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！