不使用position:fixed属性,使用什么让盒子固定,其他元素滑动式自己不动

您所在的位置:网站首页 华为p30pro桌面怎么设置固定页面图片和视频不动 不使用position:fixed属性,使用什么让盒子固定,其他元素滑动式自己不动

不使用position:fixed属性,使用什么让盒子固定,其他元素滑动式自己不动

2024-07-03 18:03| 来源: 网络整理| 查看: 265

如果不使用position: fixed属性,要实现盒子固定、其他元素滑动时自己不动的效果,可以使用position: sticky属性。

position: sticky属性将元素在滚动超过特定距离之前为相对定位,之后为固定定位。这个特定距离是通过设置top、right、bottom和left属性中的某一个或多个来确定的。当页面滚动超过这个距离时,带有position: sticky属性的元素会固定在指定位置,而其他元素会继续滚动。

下面是一个示例,演示如何使用position: sticky属性实现盒子固定、其他元素滑动时自己不动的效果:

在上面的示例中,父级元素没有设置具体的position属性,而子级元素设置了position: sticky属性,并通过top属性设置了固定位置。当页面滚动超过50px时,带有position: sticky属性的子级元素会固定在指定位置,而其他元素会继续滚动。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3