Position顧名思義就是定位元素的在網頁上的位置，有5種屬性值：static(預設)、relative(相對定位)、absolute(絕對定位)、fixed(固定)以及新加入的sticky

relative 相對定位

相對自身原本位置做移動


使用left、top、right、bottom進行移位

absolute 絕對定位

以父元素作為基準做移動


注意：父元素的定位必須是預設static之外的屬性才可運作

再繼續介紹定位之前，先來介紹一個z-index屬性

z-index

設定元素的層級，層級越高會蓋住其他元素，反之層級越低就會被其他元素蓋住(可以為負數)

• z-index只在有設定position屬性的元素上運作

層級順序

在未使用z-index時，層級順序為如下:

1. html元素
2. html依序撰寫的元素，越後者層級越高
3. 已設定定位元素，都是定位元素時，依舊是越後者層級越高

注意事項

1. z-index只能在有定位的元素下運作
2. 子元素若為absolute定位，父元素須設定預設以外的定位屬性
3. 子元素的z-index屬性只在父元素中有用
   
   即使粉色層級高於綠色，但他們非屬同個父元素，因此z-index由各自父元素影響