CSS position 屬性生成器
通過圖形介面切換5種CSS position取值（static、relative、absolute、fixed、sticky），即時預覽top/right/bottom/left與z-index的效果，並免費生成對應的CSS程式碼。
使用提示
- 切換到position: relative並設定top/left後，Box B會從原來的位置發生視覺偏移，請注意Box C（後一個元素）的位置並不會改變。
- 切換到absolute或fixed後，Box B會完全脫離正常文件流，因此Box C會往上填補它留下的空隙。
- z-index決定了元素重疊時的堆疊順序，但對position: static的元素沒有任何效果——在測試"設定 z-index"之前請先切換position。
- position: sticky只在可滾動的容器內才會生效。請實際滾動預覽框，觀察元素在中途被固定住的效果。
- 生成的CSS程式碼可以直接複製貼上到你自己的樣式表中，不妨在真實頁面上確認效果是否一致。
常見問題
absolute相對於最近的"已定位祖先元素"（即position不為static的父元素）定位，如果沒有這樣的祖先，最終會以頁面的初始包含塊為基準。而fixed始終相對於瀏覽器視口定位，因此即使頁面滾動，它也會一直停留在螢幕上的同一位置。
最常見的原因是父元素設定了overflow: hidden或overflow: auto、父元素的高度與sticky元素本身相差無幾導致沒有可粘附的空間，或者根本沒有設定top等偏移值。此外sticky的效果只在其父容器範圍內生效，因此父容器本身需要具備可滾動的區域。
relative會以該元素本應作為普通static元素時所佔據的原始位置為基準，按照設定的top/right/bottom/left值做視覺上的偏移。關鍵在於，它原本佔據的空間在佈局中仍然被保留——這與會完全脫離文件流的absolute有明顯區別。
z-index只對非position: static（即relative、absolute、fixed、sticky）的元素生效。此外，如果父元素同時使用了transform或opacity等樣式，會建立獨立的堆疊上下文，子元素的z-index就只能在該上下文內部生效，可能不會得到預期的效果。
常見做法是給想作為基準的父元素設定position: relative。即使不設定任何偏移值，僅僅新增position: relative就能使其成為"已定位元素"，其內部的absolute子孫元素就會以該元素的內側邊緣為基準進行定位。
閒話 ― position: sticky標準化的漫長曆程
CSS早期就已經擁有static、relative、absolute、fixed這4種取值，但要實現"滾動到一定位置後才固定"的表頭或側邊欄，長期以來只能依靠JavaScript監聽滾動事件，再手動切換為position: fixed。當時並不存在僅用CSS就能完成這一效果的方案。
position: sticky的構想早在2012年前後就已被寫入CSS Positioned Layout Module Level 3規範，但實現難度較高。Safari大約在2013年率先以帶瀏覽器字首的形式（-webkit-sticky）實現了它，Chrome直到2017年才支援標準的sticky關鍵字，而包括Firefox在內的主流瀏覽器都能放心使用，則要等到2020年前後。
從實現原理來看，sticky"滾動到中途被固定"的行為可以理解為relative與fixed的混合體：通常按照relative的方式遵循正常文件流，一旦滾動位置到達指定的偏移量，就會表現得如同切換為fixed一樣。這種切換隻會在父元素的可滾動範圍內發生，這也正是許多人誤以為sticky"不起作用"的主要原因。
如今，固定表格表頭、讓目錄在滾動時始終可見等場景中，sticky已成為Web設計的常用技巧。不再需要通過JavaScript監聽滾動事件，這在效能和程式碼簡潔性兩方面都是實實在在的進步。