CSS设置DIV的绝对定位和相对定位

最新推荐文章于 2025-05-18 20:58:27 发布

原创最新推荐文章于 2025-05-18 20:58:27 发布 · 6.1k 阅读

28 ·

CC 4.0 BY-SA版权

本文详细介绍了CSS中div元素的不同定位方式，包括默认流布局、相对定位和绝对定位的效果及实现方法，通过具体代码示例展示了如何调整div的位置。

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

首先不给div设置定位，看看他们在网页中的位置

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS中div定位</title>
		<style type="text/css">
			.div1{
				height: 100px;
				width: 100px;
				border: 10px solid red;
				background-color: yellow;
			}
			.div2{
				height: 100px;
				width: 100px;
				border: 10px solid blue;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			
		</div>
		<div class="div2">
			
		</div>
	</body>
</html>

如下图所示，可以看到两个div在没使用定位的情况下显示的位置，我们可以知道div是个块元素，自动换行了
在这里插入图片描述

相对定位：首先给div2使用

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS中div定位</title>
		<style type="text/css">
			.div1{
				height: 100px;
				width: 100px;
				border: 10px solid red;
				background-color: yellow;
			}
			.div2{
				height: 100px;
				width: 100px;
				border: 10px solid blue;
				background-color: yellow;
				position: relative;
				top: 40px;
				left: 40px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			
		</div>
		<div class="div2">
			
		</div>
	</body>
</html>

如下图所示，div2的位置分别偏移了左边和上边40个像素
在这里插入图片描述

绝对定位：现在给div2加绝对定位

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS中div定位</title>
		<style type="text/css">
			.div1{
				height: 100px;
				width: 100px;
				border: 10px solid red;
				background-color: yellow;
			}
			.div2{
				height: 100px;
				width: 100px;
				border: 10px solid blue;
				background-color: yellow;
				position: absolute;
				top: 40px;
				left: 40px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			
		</div>
		<div class="div2">
			
		</div>
	</body>
</html>

如下图所示
在这里插入图片描述

绝对定位：现在给div绝对定位上边60px，左边60px，看执行结果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS中div定位</title>
		<style type="text/css">
			.div1{
				height: 100px;
				width: 100px;
				border: 10px solid red;
				background-color: yellow;
				position: absolute;
				top: 60px;
				left: 60px;
			}
			.div2{
				height: 100px;
				width: 100px;
				border: 10px solid blue;
				background-color: yellow;
				position: absolute;
				top: 40px;
				left: 40px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			
		</div>
		<div class="div2">
			
		</div>
	</body>
</html>

结果如下图所示，得出结论，绝对定位的定位点是父div左上角坐标（0，0），但是由于父div默认都会有内外边距，所以看起来会有点差距。
在这里插入图片描述