position: sticky;粘性定位

想整个滚动条插件,但是里面的元素如果用absolute定位的话,会跟随滚动条滚动,fixed也不好用,偶然查到position: sticky;,确实可以解决这个问题(但兼容很差),先谷歌用着吧

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix;

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			*{
     
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.box {
     
				height: 300px;
				width: 100%;
				margin: 0 auto;
				background-color: red;
				position: relative;
				overflow: scroll;
				margin-top: 20px;
			}
			.abso{
     
				position: sticky;
				top: 0;
				left:0;
				width: 110%;
				height: 50px;
				background-color: green;
			}
			.msg{
     
				width: 110%;
				height: 600px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="abso">
				123123
			</div>
			<div class="msg">
				<p>123123sdasd</p>
				<p>123123sdasd</p>
				<p>123123sdasd</p>
				<p>123123sdasd</p>
				<p>123123sdasd</p>
				<p>123123sdasd</p>
				<p>123123sdasd</p>
				<p>123123sdasd</p>
			</div>
		</div>
	</body>
</html>

你可能感兴趣的:(css)