Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

position: sticky 什么情况下会失效 #128

Open
xiaotiandada opened this issue Feb 15, 2023 · 0 comments
Open

position: sticky 什么情况下会失效 #128

xiaotiandada opened this issue Feb 15, 2023 · 0 comments
Labels

Comments

@xiaotiandada
Copy link
Owner

position: sticky 是一种常用的CSS定位方式,它使得元素可以在滚动时“粘”在相对定位的容器内,同时在滚动到容器底部时停留在底部位置。不过,在某些情况下,position: sticky 可能会失效。以下是一些可能导致 position: sticky 失效的情况:

  1. 容器的高度不足以容纳滚动时要固定的元素:如果容器的高度不够高,就可能导致元素在滚动过程中无法停留在指定位置。在这种情况下,可以尝试通过调整容器的高度或者将 position: sticky 应用于更高级别的容器来解决问题。

  2. 容器没有指定高度:如果容器没有显式指定高度,那么元素的定位高度可能无法正确计算。在这种情况下,应该为容器指定一个明确的高度。

  3. 父元素使用了 transform 属性:当父元素应用了 transform 属性时,可能会导致 position: sticky 失效。在这种情况下,可以尝试使用 translate3d 来代替 transform 属性,或者将固定元素的父元素拆分为两个元素,其中一个使用 transform 属性,另一个使用 position: sticky。

  4. 元素跨越了多个容器:如果要固定的元素跨越了多个容器,那么 position: sticky 可能无法正确计算其位置。在这种情况下,可以将固定元素放在最近的容器中,并使用 position: relative 来创建必要的偏移量。

  5. 浏览器不支持 position: sticky:虽然 position: sticky 是一种现代CSS定位方式,但并不是所有的浏览器都支持它。在这种情况下,可以使用 position: fixed 或其他定位方式来实现类似的效果。

-- 来自 chatGPT 的回答

我是没有给定高度导致失效无法固定🧷

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant