粘性定位为什么不生效
时间: 2023-11-12 13:15:22 浏览: 62
粘性定位不生效的情况有几种可能性。首先,在粘性定位中,如果没有指定left、right、top和bottom中的任何一个值,那么粘性定位将不起作用。其次,当粘性约束元素滚出视口时,粘性元素也会滚出视口,这意味着粘性元素没有机会显示固定定位的状态。另外,如果粘性约束元素和容器元素之间存在使用overflow:hidden的元素,则粘性定位也会失效。
总的来说,粘性定位只在滚动超出指定值时才能发挥作用,类似于position:relative,而在超出指定值后,它的表现就像position:fixed,固定在目标位置。所以,如果没有设置粘性元素的位置属性,或者粘性约束元素滚出了视口,或者存在使用overflow:hidden的元素,粘性定位就会不生效。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [彻底理解粘性定位(position:sticky)](https://blog.csdn.net/weixin_57585624/article/details/120116514)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [html和css页面导航栏顶端固定,粘性定位(position: sticky;)失效原因](https://blog.csdn.net/m0_71491195/article/details/125773022)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)