首先，css的position屬性選擇有很多，不同瀏覽器支援的position屬性多少有所不同。
以谷歌為例，position支援absolute、relative、static、fixed、initial、inherit、sticky、unset。但是對於所有瀏覽器都會支援也是容易弄混的就是position的前面四個引數。
常用屬性說明：
static（靜態定位）：預設值。沒有定位，元素出現在正常的流中（忽略tblr或者z-index宣告）。
relative（相對定位）：生成相對定位的元素，通過top,bottom,left,right的設定相對於其正常（原先本身）位置進行定位。可通過z-index進行層次分級。
absolute（絕對定位）：生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。可通過z-index進行層次分級。
fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。可通過z-index進行層次分級。
特別說明：
relative：該元素脫離正常的文字流，但是其在文字流中的位置依然存在。
總是相對於其最近的父元素定位，無論父元素是何種定位方式。 a
bsolute：該元素脫離正常的文字流，但是其在正常文字流中的位置不再存在。
該元素預設繼承原文件流偏移位置（tblr），即顯示在原文件流位置。
父元素未設定position屬性（relative，absolute），相對於body定位，如果設定tblr，將覆蓋原tblr。
父元素設定position屬性（relative，absolute），同時設定tblr，將相對于父元素定位。
推薦一篇文件有具體的例項說明：
CSS 定位position屬性
div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即 塊框 與之相反，span 和 strong 等元素稱為 行內元素 這是因為它們的內容顯示在行中，即 行內框 您可以使用 display 屬性改變生成的框的型別。將 display 屬性設定為 block，可以讓行內元素...
CSS 定位屬性position
一 position 屬性 規定元素的定位型別。即元素脫離文件流的布局，在頁面的任意位置顯示。有4種不同型別的定位 absolute 絕對定位 脫離文件流的布局，遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素 postion不為static 否則為body文件本身。relative 相...
css 聊聊position屬性
今天呢，想聊聊css裡的position屬性。也就是元素定位屬性。目的呢，是為了梳理一下自己學習工作中積累的經驗。根據mdn文件，css屬性 position 用於指定乙個元素在文件中的定位方式。另外還需要偏移屬性top,right,bottom 和 left來決定了該元素的最終位置。適用於所有元素...