前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

css固定元素,滚动到此处位置时固定position: sticky

需求:当页面很长,有滚动条时,需要固定页面上的部分元素,便于下方元素和上方固定元素的对照。


.box1{
				width: 100%;
				height: 50px;
				background: skyblue;
			}
			.box2{
				width: 100%;
				height: 50px;
				background: darkorange;
				position: sticky;
				top: 0;
			}
			.box3{
				width: 100%;
				/*height: 1000px;*/
			}



<div class="box1">这是一行文字</div>
		<div class="box2">这是要固定的部分</div>
		<div class="box3">		
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
			<p>主题部分</p><br />
      ......
      </div>

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言