当前位置：首页 > article >正文

CSS中的位置定位总结

article 2024/11/18 10:46:52

文章目录

静态定位
相对定位
绝对定位
固定定位

静态定位

静态定位(position:static)/默认的文档流布局

块级元素按照书写顺序从上往下依次排列
行内/行内块元素按照书写顺序从左到右依次排列，一行放不下才换行
文档流中的元素都是紧密排布的，没有大的空隙，且没有堆叠现象
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>静态定位</title>
		<style>
			.box {
				width: 350px;
				height: 350px;
				background-color: rgb(199,237,204);
			}
			.box2 {
				width: 200px;
				height: 200px;
				background-color: #e8e8e8;
			}
		</style>
	</head>
	<body>
		<div class="box">box</div>
		<div class="box2">box2</div>
	</body>
</html>

在这里插入图片描述

相对定位

相对定位(position:relative)

不会脱离文档流，不会释放布局空间
定位参照物：自己作为静态定位元素时的位置
可以使用top/bottom/left/right修改自己的位置
可能会出现堆叠现象，可以使用z-index调整层级
用途 1：微调自己的位置
用途 2：为使用绝对定位的后代元素提供定位参照物
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位</title>
		<style>
			.box {
				width: 350px;
				height: 350px;
				background-color: rgb(199,237,204);
				position: relative;
				top:50px;
			}
			.box2 {
				width: 200px;
				height: 200px;
				background-color: #e8e8e8;
			}
		</style>
	</head>
	<body>
		<div class="box">box</div>
		<div class="box2">box2</div>
	</body>
</html>

在这里插入图片描述
当给box元素设置top属性值为50px时：

绝对定位

绝对定位(position:absolute)
1) 会脱离文档流，释放布局空间
2) 定位参考物：离自己最近的具有非静态定位属性的祖先元素，会逐级向上找，终点是html
所以我们可以使用"自绝父相"，但若父级有非静态定位属性，就不用专门加了
3) 可以使用top/bottom/left/right修改自己的位置
4) 可能会出现堆叠现象，可以使用z-index调整层级
5) 用途：在页面上覆盖到其他元素上方的指定位置

脱离文档流演示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<style>
			* {
				margin: 0;
			}
			.fu {
				width: 350px;
				height: 350px;
				background-color: rgb(199,237,204); /* 设置为半透明,方便看到底部覆盖到的元素 */
				position: relative;
				top: 30px;
				left: 50px;
			}
			.zi {
				width: 200px;
				height: 200px;
				background-color: #e8e8e8;
				position: absolute;
				top: 60px;
				left: 80px;
			}
			.zi2 {
				width: 200px;
				height: 220px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="fu">
			<div class="zi">zi</div>
		</div>
	</body>
</html>

在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<style>
			* {
				margin: 0;
			}
			.fu {
				width: 350px;
				height: 350px;
				background-color: rgb(199,237,204); 
				position: relative;
				top:30px;
				left: 50px;
			}
			.zi {
				width: 200px;
				height: 100%;
				background-color: #e8e8e8;
			}
			.zi2 {
				width: 200px;
				height: 220px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="fu">
			<div class="zi">zi</div>
			<div class="zi2">zi2</div>
		</div>
	</body>
</html>

在这里插入图片描述

修改一下代码将zi2元素改为p元素：

这里需要注意的是：通过上图也可以看到当zi2元素的width和height明确指定了的前提下，若同时设置top:0和bottom:0，生效的只有top:0；同理同时设置的left:0和right:0，生效的只有left:0;
若没有给zi2元素设置width，那么在绝对定位下，其同时设置left:0和right:0；zi2元素的宽会扩展到fu元素的整个宽度。
在这里插入图片描述
若没有给zi2元素设置height，那么在绝对定位下，其同时设置top:0和bottom:0；zi2元素的高度会扩展到fu元素的整个高度。

当父块级元素的位置设置为相对定位，子块元素的位置设置为绝对定位，top/bottom/left/right都设置为0，margin设置为auto;
可实现子块级元素在父元素中，水平居中且垂直居中。
在这里插入图片描述

可以看到此时的margin:auto;不仅在水平方向均分外间距生效，垂直方向上也进行了均分外间距且生效，从而实现块级子元素水平和垂直方向居中显示。

固定定位

固定定位(position:fixed)
1) 会脱离文档流，释放布局空间
2) 定位参照物: html根元素，但网上说的是浏览器窗口或者viewport(界面视口)
3) 可以使用top/bottom/left/right修改自己的位置
4) 可能会出现堆叠现象，可以使用z-index调整层级
5) 用途:制作覆盖整个窗口的遮罩层,
主要用于将元素固定在浏览器窗口的某个位置，无论页面如何滚动，该元素都会保持在视口的固定位置不变。
以下是 position: fixed 的一些主要使用场景：
固定导航栏：最常见的使用场景之一是将网站的导航

代码在day09code/p5.html里，需要的，可以私信。
效果如下：在这里插入图片描述