css position定位

最新推荐文章于 2025-06-07 20:47:06 发布

原创最新推荐文章于 2025-06-07 20:47:06 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #position

本文深入解析CSS中的position属性，包括relative、absolute、fixed和static四种定位方式。通过实例演示每种定位方式的效果，帮助读者理解元素如何在页面中定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这几天在学CSS，看了W3school对position的解释，不是很明白，所以今天决定网上搜索重学position，以此记录一下

position有个四个属性：

relative
absolute
fixed
static

初始时的div

		<div class="sub1">
			sub1
		</div>
		<div class="sub2">
			sub2
		</div>


CSS如下：
.sub1{
	background-color: green;
	font-size: 24px;
	/* position: relative; */
	top:100px;
}
.sub2{
	background-color: black;
	font-size: 24px;
	color: white;
}

显示效果：

relative

relative，相对位置，设置了relative属性，sub1会根据其正常的位置相对的移动，移动的距离依据所设置的 top,bottom,right,left所决定，一句话就是sub1如果不设置relative时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。sub2因为没有设置relative属性所以，他的位置不动，他不受sub1的影响。relative的偏移是基于对象的margin的左上侧的。

		<div class="sub1">
			sub1
		</div>
		<div class="sub2">
			sub2
		</div>


CSS如下：
.sub1{
	background-color: green;
	font-size: 24px;
	position: relative;//设置relative属性
	top:10px;//top移动10像素
	left: 15px;//left移动15像素
}
.sub2{
	background-color: black;
	font-size: 24px;
	color: white;
}

可以看到sub1依据top和left的值进行了相对的移动，而sub2没有受影响

absolute

absolute绝对定位，当sub1设置为absolute时其位置分为两种情况，1）sub1有父标签且父标签的position设置为relative或者absolute，sub1的位置就根据这个父标签的位置来定位。2）sub1没有父标签或者父标签没有设置position，sub1的位置根据 body来定位。特别要注意的是，absolute定位使元素的位置与文档流无关，因此不占据空间。absolute定位的元素和其他元素重叠。

		<div class="sub">
			<div class="sub1">
				sub1
			</div>
			<div class="sub2">
				sub2
			</div>
		</div>	



.sub{
	width: 200px;
	background-color: red;
/* 	position: relative;
	top: 50px;
	left: 60px; */
	/* margin: 50px; */
}

.sub1{
	width: 100px;
	
	background-color: green;
	font-size: 24px;
/* 	position: absolute;
	top:10px;
	left: 30px; */
}
.sub2{
	background-color: black;
	font-size: 24px;
	color: white;
	width: 100px;
}

最初始的效果：

.sub{
	width: 200px;
	background-color: red;
/* 	position: relative;
	top: 50px;
	left: 60px; */
	/* margin: 50px; */
}

.sub1{
	width: 100px;
	
	background-color: green;
	font-size: 24px;
	position: absolute;
	top:10px;
	left: 30px;
}

sub1加上了absolute属性，而父标签没有设置position，所以sub1的位置依据body来定位，absolute定位使元素的位置与文档流无关，因此不占据空间，所以sub2的位置变成了原来sub1的位置

为了能跟直观的感觉sub1的位置依据body来定位，我们给sub加上margin，但没有加position

.sub{
	width: 200px;
	background-color: red;

这一段是注释掉了的，上面的也是，要仔细看
/* 	position: relative;
	top: 50px;
	left: 60px; */



	margin: 50px;
}

.sub1{
	width: 100px;
	
	background-color: green;
	font-size: 24px;
	position: absolute;
	top:10px;
	left: 30px;
}

可以看到sub1没有受sub影响

当sub设置了position后，我们再来看看sub1的位置是如何定位的

.sub{
	width: 200px;
	background-color: red;
	position: relative;
	top: 50px;
	left: 60px;
	/* margin: 50px; */
}

.sub1{
	width: 100px;
	
	background-color: green;
	font-size: 24px;
	position: absolute;
	top:10px;
	left: 30px;
}

可以看到sub1的位置是跟sub来定位了。再就是absolute定位使元素的位置与文档流无关，因此不占据空间，所以sub2的位置变成了原来sub1的位置

fixed

fixed是特殊的absolute，它总是根据body定位，不管有没有父标签即使是父标签设置了position

初始CSS

		<div class="sub">
			<div class="sub1">
				sub1
			</div>
			<div class="sub2">
				sub2
			</div>
			<div class="sub3">
				sub3
			</div>
		</div>	



.sub{
	width: 200px;
	background-color: red;
	/* position: relative;
	top: 50px;
	left: 60px; */
	margin: 50px;
}

.sub1{
	width: 100px;
	background-color: green;
	font-size: 24px;
/* 	position: absolute;
	top:10px;
	left: 30px; */
}
.sub2{
	background-color: black;
	font-size: 24px;
	color: white;
	width: 100px;
}
.sub3{
	background-color: blue;
	font-size: 24px;
	color: deeppink;
	width: 100px;
	/* position: fixed; */
	top:10px;
	left: 30px;
}

初始效果：

接着给sub的position设置为relative，sub3的position设置为fixed,可以看到即使sub的position设置为relative，sub3还是依据body定位

.sub{
	width: 200px;
	background-color: red;
	position: relative;
	top: 50px;
	left: 60px;
	/* margin: 50px; */
}

.sub1{
	width: 100px;
	background-color: green;
	font-size: 24px;
/* 	position: absolute;
	top:10px;
	left: 30px; */
}
.sub2{
	background-color: black;
	font-size: 24px;
	color: white;
	width: 100px;
}
.sub3{
	background-color: blue;
	font-size: 24px;
	color: deeppink;
	width: 100px;
	position: fixed;
	top:10px;
	left: 30px;
}