首頁  >  文章  >  web前端  >  css3 sticky不生效怎麼辦

css3 sticky不生效怎麼辦

藏色散人
藏色散人原創
2020-12-11 09:12:297382瀏覽

css3 sticky不生效的解決方法:1、父元素不能overflow:hidden或overflow:auto屬性;2、必須指定top、bottom、left、right4個值之一;3、父元素的高度不能低於sticky元素的高度。

css3 sticky不生效怎麼辦

本教學操作環境:windows7系統、css3版、thinkpad t480電腦。

推薦:《css影片教學

sticky不生效原因有:

  • 父元素設定了overflow:hidden或overflow:auto

  • 未指定top、right、bottom、left4個值中的任一個

  • 父元素高度小於sticky定位的元素高度

  • sticky屬性依賴使用者的捲動,在position:relative 與position:fixed 定位之間切換。

  • 元素定位表現為跨越特定閾值前為相對定位,之後為固定定位。

sticky屬性只在以下幾個條件都滿足時有效:

  • 父元素不能overflow:hidden或者overflow:auto屬性

  • 必須指定top、bottom、left、right4個值之一,否則只會處於相對定位

  • ##父元素的高度不能低於sticky元素的高度

  • #

以上是css3 sticky不生效怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn