首页 前端知识 CSS3之position:sticky使用

CSS3之position:sticky使用

2024-05-27 10:05:08 前端知识 前端哥 665 221 我要收藏

🐱个人主页:不叫猫先生
🙋‍♂️作者简介:专注于前端领域各种技术,热衷分享,期待你的关注。
📝个人签名:不破不立

🍬本文目录

    • 🥙一、简介
    • 🥪二、使用场景
    • 🌮三、注意事项
    • 🍰四、案列

🥙一、简介

css3中position有个属性值sticky,即粘型定位,初级面试中会经常问到,大多数面试者往往会忽略这个属性值,其可以理解为相对定位(relative)和固定定位(fixed)的结合。

🥪二、使用场景

比如导航或者Tab当我们下拉的时候,则会被隐藏,但是我们要实现随着下拉导航或Tab保持在浏览器窗口顶端。

🌮三、注意事项

  • 父元素高度必须大于sticky元素的高度
  • 不设置父元素高度的时候,父元素不能使用除了overflow的visiable属性,比如auto、scroll
  • 设置父元素高度,子元素高度超过父元素高度,父元素使用auto、scroll等属性,此时且出现了滚动,sticky依然是有效
  • 设置父元素高度,子元素高度没有超过父元素高度,此时没有出现滚动,sticky仅在父元素高度内有效
  • sticky元素需要设置top、bottom、left、right的值

🍰四、案列

	<style>
		.sticky {
			position: -webkit-sticky;
			position: sticky;
			top: 0;
			padding: 5px;
			background-color: #cae8ca;
			border: 2px solid #4CAF50;
		}
		/* .box {
			overflow: scroll;
			margin-top: 100px;
			width: 100%;
			height: 500px;
			background: #ff0;
		} */
		/* .content {
			width: 100%;
			height: 800px;
			overflow: auto;
			background: #4CAF50;
		} */
	</style>
	<div class="content">
		<div class="box">
			<p>测试数据</p>
			<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
			<div class="sticky">粘性定位!</div>
			<div style="padding-bottom:2000px">
				<p>测试</p>
				<p>测试</p>
				<p>测试</p>
				<p>测试</p>
			</div>
		</div>
	</div>

修改css,测试sticky满足的条件,以上案例是可以正常进行sticky的,over

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9683.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!