点击刷新
css怎么设置粘性定位？
粘性定位的设置方法是给元素添加position: sticky; ，sticky是css定位新增属性，类似static（没有定位） 和 固定定位fixed 的结合。
它主要用在对 scroll 事件的监听上，简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)；（相关课程推荐：css视频教程）
position:sticky这时的效果相当于fixed定位，固定到适当位置
1、sticky的使用：
#sticky-nav {
position: sticky;
top: 100px;
}设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可
使用条件：
父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效
2、示例：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#sticky-nav {
position: sticky;
top: 0px;
background: skyblue;
}
#sticky-nav > ul{
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
}
#sticky-nav > ul > li{
color: #fff;
padding: 8px 4px;
}
p{
height: 100px;
line-height: 100px;
margin: 6px 0;
background: #eee;
}
</style>
</head>
<body>
<p>一段文字</p>
<div id="sticky-nav">
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
</div>
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
</body>
</html>效果：
© 著作权归作者所有
举报
发表评论
0/200
