Sticky position | css sticky-top
![Sticky position](https://i.imgur.com/axBPWDg.jpg)
前言2020秋天,我將用30天的時間,來嘗試回答和網路前端開發相關的30個問題。30天無法一網打盡浩瀚的前端知識,有些問題可能對有些讀者來說相對簡單,不過期待這趟旅程,能幫助自己、也幫助讀者打開不同的知識大門。有興趣的話,跟著我一起探索吧!Stickytablehead先前做專案的時候有個很長的table,遇到一個問題是,要如何在使用者往下滑動畫面的時候,讓tablehead能維持在畫面上方?當我找著找著,就發現CSS的position在static,relative,absolute,fixed之外,還有一個sticky的值!今天就來快速的回顧一下CSSposition屬性,然後也看...
前言2020 秋天,我將用 30 天的時間,來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識,有些問題可能對有些讀者來說相對簡單,不過期待這趟旅程,能幫助自己、也幫助讀者打開不同的知識大門。有興趣的話,跟著我一起探索吧!
Sticky table head先前做專案的時候有個很長的 table,遇到一個問題是,要如何在使用者往下滑動畫面的時候,讓 table head 能維持在畫面上方?
當我找著找著,就發現 CSS 的 position 在 static, relative, absolute, fixed 之外,還有一個 sticky 的值!
今天就來快速的回顧一下 CSS position 屬性,然後也看一下新朋友 sticky
原廠設定 static position: static如果沒有做任何 position 的設定,那麼該 element 的 postion 就是 static,意思就是會依照原本、正常的方式排列。在 static 的情況下,top,right, bottom, left, z-index 都是無效的。
relative position: relativerelative 和 static 其實非常像,但在 relative 的情況下可以使用 top,right, bottom, left, z-index 且不影響其他 elements 的排列。也就是像下面這個樣子:
藍色的方塊還以為綠色的方塊還在原本的位置上,但實際上綠色的方塊已經透過 top,right, bottom, left 屬性偏移原本的位置了。另一方面,你也會注意到,在 HTML 結構上先出現的綠色方塊,這時候覆蓋在藍色方塊上,這是因為當我們設定 position: relative 時,會創造出一個新的 "stacking context",這個新的 stacking context 出現在原本的 stacking context 之後,所以在 z-index 層級上會變得比...
取得本站獨家住宿推薦 15%OFF 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
CSS Position Sticky | css sticky-top
How To Make Elements Stick with CSS position | css sticky-top
Learn how to create a "fixed" menu with CSS. | css sticky-top
Learn how to create a sticky element with CSS. | css sticky-top
position - CSS: Cascading Style Sheets | css sticky-top
position | css sticky-top
Sticky position | css sticky-top
使用position:sticky 实现粘性布局 | css sticky-top
前端新手村Position 定位 | css sticky-top
杀了个回马枪,还是说说position:sticky吧« 张鑫旭 | css sticky-top
![](https://i.imgur.com/axBPWDg.jpg)