CSS3之position/sticky使用

🥙一、简介

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

• 设置了position:sticky的元素并不会脱离文档流
• 元素在区域内，元素不受定位的影响（top、left等设置无效）
• 元素所在窗口发生滚动，元素就要移出区域时，定位又会变成fixed，根据设置的left、top的值进行定位，像是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

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！