CSS三种定位_css 三个位置-优快云博客

本文详细介绍了CSS中的三种定位方式：相对定位、绝对定位和固定定位。相对定位保留元素原有位置并根据`left`、`right`、`top`、`bottom`属性进行偏移；绝对定位依据最近有定位的祖先元素进行定位，如果没有则追溯到`body`；固定定位使元素在屏幕特定位置保持静态，不受滚动影响。通过多个代码示例，清晰展示了各种定位方式的效果和应用场景。

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

	position值	是否占位	相对于什么定位
相对定位	relative	是	自身原来位置
绝对定位	absolute	否	追溯有定位的上级
固定定位	fixed	否	屏幕某个位置

相对定位

保留自身位置，相对自身位置定位

案例一：首先定义两个div

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>你好</title>
	<style type="text/css">
		.a{
			width: 200px;
			height: 200px;
			background-color: blue;
		}
		.b{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="a">
	</div>
	<div class="b">		
	</div>
</body>
</html>

在这里插入图片描述

案例二：修改代码，让蓝色div相对定位

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>你好</title>
	<style type="text/css">
		.a{
			width: 200px;
			height: 200px;
			background-color: blue;
			position: relative;
			left: 30px;
			top: 30px;
		}
		.b{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="a">
	</div>
	<div class="b">		
	</div>
</body>
</html>

在这里插入图片描述

蓝色div相对定位后，他本来的位置还保留，因此红色div不会跑到上面去，蓝色div只是相对自身进行定位

案例三：类似地，修改定位偏移量

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>你好</title>
	<style type="text/css">
		.a{
			width: 200px;
			height: 200px;
			background-color: blue;
			position: relative;
			right: 50px;
			bottom: 5px;
		}
		.b{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="a">
	</div>
	<div class="b">		
	</div>
</body>
</html>

在这里插入图片描述

得出的结论依旧是：蓝色div保留原来位置，相对自身原来位置进行定位

绝对定位

相对有定位的父级进行定位，直到body

案例四：我们依然拿案例一修改代码让蓝色div进行绝对定位

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>你好</title>
	<style type="text/css">
		.a{
			width: 200px;
			height: 200px;
			background-color: blue;
			position: absolute;
			top: 30px;
			left: 200px;
		}
		.b{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="a">

	</div>
	<div class="b">
		
	</div>
</body>
</html>

在这里插入图片描述

可以看到，蓝色div绝对定位后，不保留他原来位置，红色div跑到他原来的位置了，那么蓝色div是相对自身原来位置进行定位吗？请看下面两个案例并作对比

案例五：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>你好</title>
	<style type="text/css">
		.a{
			width: 200px;
			height: 200px;
			background-color: blue;
			position: absolute;
			top: 30px;
			left: 200px;
			/*margin: 0 auto;*/
		}
		.c{
			width: 100px;
			height: 100px;
			background-color: yellow;
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<div class="a">
		<div class="c"></div>
	</div>
</body>
</html>

在这里插入图片描述

案例六：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>你好</title>
	<style type="text/css">
		.a{
			width: 200px;
			height: 200px;
			background-color: blue;
			/*position: absolute;
			top: 30px;
			left: 200px;*/
			margin: 0 auto;
		}
		.c{
			width: 100px;
			height: 100px;
			background-color: yellow;
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<div class="a">
		<div class="c"></div>
	</div>
</body>
</html>

在这里插入图片描述

通过案例五案例六我们可以得出以下结论：当黄色c进行绝对定位，若他的父级有定位，则相对他的父级进行定位（案例五得出）；若黄色c的父级无定位，则黄色c再往上追溯父级的父级直到找到有设置定位的元素，直至找到body（案例六得出）

固定定位

固定定位是将div定位到页面固定一个地方，使其处于静态状态，现实多用于侧边导航栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>你好</title>
	<style type="text/css">
		.nav{
			color: white;
			width: 100px;
			height: 500px;
			background-color: black;
			position: fixed;
			right: 0;
			top: 100px;
		}
	</style>
</head>
<body>
	<div class="nav">
		固定定位导航栏
	</div>
	<p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p>
	<p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p>
	<p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p>
	<p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p>
	<p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p>
	<p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p>
	<p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p><p>1111</p>
	<p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p>
	<p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p>
	<p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p>
	<p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p>
	<p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p><p>2222</p>
</body>
</html>