[Back To Basic] CSS position

position

共有五種

• static(預設值)
• relative
• fixed
• absolute
• sticky

註:

• top bottom left right 屬性，使用前必須先指定position
• 每個 position 對 top bottom left right 屬性解釋的方式也不同

position: static

• 不受 top bottom left right影響
• 遵循瀏覽器預設的排版規則

position: relative

• 會受 top bottom left right影響
• 設定 relative後，會依據 top bottom left right 調整相對於預設位置的位置

position: fixed

• 會受 top bottom left right影響
• 設定 fixed 後，會依據 top bottom left right 調整相對於整個視窗的位置

position: absolute

• 會受 top bottom left right影響
• 設定 absolute後，會 top bottom left right 調整相對於父元素位置的位置
• 如果沒有父元素位置，則以 body 來調整
• 父元素位置: 就是父元素的position不能是static

position: sticky

• 會受 top bottom left right影響
• 設定 sticky後，會 top bottom left right 調整相對於Scrollbar的位置
• 依據scrollbar的位置，sticky 會在 relative 和 fix 間切換
• position 會一直保持 relative，直到滾動到指定的偏移位置(offset)，之後會改成 fixed

重疊元素

• 元素定位之後，元素可以互相交疊
• z-index 可以指定元素的前後

source code