🐱個人主頁：不叫貓先生
🙋?♂?作者簡介：專注于前端領域各種技術，熱衷分享，期待你的關注。
📝個人簽名：不破不立

🍬本文目錄

• • 🥙一、簡介
  • 🥪二、使用場景
  • 🌮三、注意事項
  • 🍰四、案列

🥙一、簡介

css3中position有個屬性值sticky，即粘型定位，初級面試中會經常問到，大多數面試者往往會忽略這個屬性值，其可以理解為相對定位（relative）和固定定位(fixed)的結合。

🥪二、使用場景

比如導航或者Tab當我們下拉的時候，則會被隱藏，但是我們要實現隨著下拉導航或Tab保持在瀏覽器窗口頂端。

🌮三、注意事項

• 父元素高度必須大于sticky元素的高度
• 不設置父元素高度的時候，父元素不能使用除了overflow的visiable屬性，比如auto、scroll
• 設置父元素高度，子元素高度超過父元素高度，父元素使用auto、scroll等屬性，此時且出現了滾動，sticky依然是有效
• 設置父元素高度，子元素高度沒有超過父元素高度，此時沒有出現滾動，sticky僅在父元素高度內有效
• sticky元素需要設置top、bottom、left、right的值

🍰四、案列

<style>.sticky {position: -webkit-sticky;position: sticky;top: 0;padding: 5px;background-color: #cae8ca;border: 2px solid #4CAF50;}/* .box {overflow: scroll;margin-top: 100px;width: 100%;height: 500px;background: #ff0;} *//* .content {width: 100%;height: 800px;overflow: auto;background: #4CAF50;} */</style> <div class="content"><div class="box"><p>測試數據</p><p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 屬性。</p><div class="sticky">粘性定位!</div><div style="padding-bottom:2000px"><p>測試</p><p>測試</p><p>測試</p><p>測試</p></div></div></div>

修改css，測試sticky滿足的條件，以上案例是可以正常進行sticky的，over

總結

以上是生活随笔為你收集整理的CSS3之position:sticky使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。