【css】定位网页元素含案例导航条吸顶变色

一二小选手

于 2024-08-11 11:09:15 发布

阅读量1k

点赞数 17

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/m0_66584716/article/details/141102852

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

定位在网页中的应用

下拉菜单
不随滚动条移动的固定导航
鼠标移入弹出的消息框
…

定位只适用于特定场景，一定不能用于布局

布局时先搭div 设置宽高bgc

position

默认定位

static

没有定位，以标准流方式显示

相对定位

relative

偏移设置：top、left、right、bottom

相对定位元素的规律

相对于自己的初始位置来定位
不脱离标准文档流中
元素位置发生偏移后，原来的位置会被保留下来
层级提高，可以把标准文档流中的元素及浮动元素盖在下边

相对定位的使用场景：相对定位relative 一般情况下很少自己单独使用，都是配合绝对定位absolute 使用，为绝对定位创造定位父级而又不设置偏移量

#third {
	background-color:#C5DECC;
	border:1px #395E4F dashed;
	position:relative;
	right:20px;
	bottom:30px;
}

偏移量方向（left和top正、负取值的方向）

在这里插入图片描述

绝对定位

absolute

偏移设置：top、left、right、bottom

绝对定位元素的规律

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
脱离标准文档流
元素位置发生偏移后，原位置不保留
层级提高，把标准文档流中的元素及浮动元素盖在下边

绝对定位不设置偏移量：设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况

绝对定位的使用场景：一般情况下，绝对定位用在：下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

固定定位

fixed

偏移设置： left、right、top、bottom

固定定位元素的规律

脱离标准文档流
固定到浏览器窗口，相对浏览器窗口来定位
偏移量不会随滚动条的移动而移动

固定定位的使用场景：左右两边的固定广告、返回顶部图标、导航栏等

吸顶定位

stiky，滚动条到顶定位

案例：导航条吸顶变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="height: 2000px;">
		<div class="header"></div>
	</body>
	<style type="text/css">
		.header{
			position: sticky;
			top: 0;
			width: 100%;
			height: 100px;
			background-color: red;
		}
		
		.sticky {
		  background-color: #333; /* 吸顶后的头部颜色 */
		}
	</style>
	<script type="text/javascript">
		window.addEventListener('scroll', function() {
		  var header = document.querySelector('.header');
		  var sticky = header.offsetTop;
		  console.log(sticky)
		  if (sticky> 500) {
		    header.classList.add('sticky');
		  } else {
		    header.classList.remove('sticky');
		  }
		});
	</script>
</html>