?

relative相對定位

偏移設置：left、right、top、bottom 值單位：px

元素的規律：

相對定位元素的規律

　　設置相對定位的盒子會相對它原來的位置通過指定偏移，到達新的位置。

　　設置相對定位的盒子仍在標準文檔流中，它對父級盒子和相鄰的盒子都沒有任何影響

　　設置相對定位的盒子原來的位置會被保留下來

?

特性：

?????相對于自己的初始位置來定位

?????元素位置發生偏移后，他原來的位置會被保留下來

?????層級提高，可以把標準文檔流中的元素及浮動元素蓋下邊

使用場景：

????相對定位一般情況下很少自己單獨使用，都是配合絕對定位使用，為絕對定位創造定位父級而又不設置偏移量。

absolute絕對定位

　　使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元素”為基準進行偏移。

　　如果沒有已經定位的祖先元素，會以瀏覽器窗口為基準進行定位

　　絕對定位的元素從標準文檔流中脫離，這意味著他們對其他元素的定位不會造成影響。

　　元素位置發生偏移后，他原來的位置不會被保留下來

特性：

　　絕對定位是相對定位父級的位置來定位，如果沒有設置定位父級，則相對瀏覽器窗口來定位。

　　元素位置發生偏移后，原來的位置不會被保留

　　層級提高，可以把標準文檔流中的元素及浮動元素蓋在下邊

　　設置絕對定位的元素脫離文檔流

?

使用場景：

????一般情況下，絕對定位用在下拉菜單、焦點圖輪播、彈出數字氣泡、特別花邊等場景。

?

fixed屬性值

偏移設置：left、right、top、bottom ?值單位：px

　　類似絕對定位，不過區別在于定位的基準不是祖先元素，而是瀏覽器窗口

?

z-index屬性

調整元素定位時重疊層的上下位置

　　z-index屬性值：整數，默認值為0

設置了position屬性時，z-index屬性可以設置各元素之間的重疊高低關系

　　z-index值大的層位于其值小的層上方

網頁元素透明度

屬性：

opaction? filter

?opaction:x; x值[0 ,1]，值越小越透明

?filter:alpha(opacity=x); x值[0 ,100]，值越小越透明

?

轉載于:https://www.cnblogs.com/cosmosray/p/7562278.html

總結

以上是生活随笔為你收集整理的CSS定位网页中的元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。