导致position:sticky失效的原因

导致position:sticky失效的原因

在这里插入图片描述

一、简介

sticky 英文字面意思是粘,粘贴,所以称之为粘性定位。sticky属性依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一,即指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。

二、使用条件

sticky属性仅在以下几个条件都满足时有效:

父元素不能overflow:hidden或者overflow:auto属性,或者body height:100%
必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
父元素的高度不能低于sticky元素的高度

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页