Div入门之div定位position，绝对定位absolute,相对定位relative

最新推荐文章于 2025-05-18 21:54:32 发布

原创最新推荐文章于 2025-05-18 21:54:32 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

div+css的应用专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS中的两种定位方式——绝对定位和相对定位。通过具体的代码示例，展示了如何使用position属性来实现元素的位置控制，并解释了z-index的重要性及用法。

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

定位有两种：

1:绝对定位

position:absolute

top,bottom,left,right 写出具体数值

注：当多个div在同一个位置时，显示哪个层由z-index的值决定，值较大的有限显示

//style.css
h2.first{
	position:absolute;
	left:100px;
	top:150px;
	background:red;
}

#second{
	position:absolute;
	left:110px;
	top:10px;
	width:300px;
	height:100px;
	background:pink;
	z-index:1
}

#third{
	position:absolute;
	left:110px;
	top:10px;
	width:200px;
	height:100px;
	background:green;
	z-index:2
}


#four{
	width:100px;
	height:150px;
	background:blue;
}

<html>
<head>
	<title>div定位绝对定位</title>
	<link rel = "stylesheet" href = "style.css" type = "css/style.css"/>
</head>
<body>
	<h2 class="first">这是带有绝对定位的标题</h2>
	<div id="second">这是一个div</div>
	<div id="third">这是另一个div</div>
	<div id="four">一个咯</div>
</body>
</html>

2:相对定位

position:relative

相对于正常位置的top.bottom,left,right

然后有个地方要注意的就是，后一个的相对位置时以前一个绝对位置为基准点的

//style.css
h2.first{
	position:relative;
	left:-20px;
}

h2.second{
	position:relative;
	left:20px;
}

#third{
	position:relative;
	left:50px;
	top:0px;
	width:200px;
	height:100px;
	background:green;
}


#four{
	position:relative;
	left:80px;
	top:0px;
	width:100px;
	height:150px;
	background:blue;
}

<html>
<head>
	<title>div定位相对定位</title>
	<link rel = "stylesheet" href = "style.css" type = "css/style.css"/>
</head>
<body>
	<h2>这是带有绝对定位的标题</h2>
	<h2 class="first">这是带有绝对定位的标题</h2>
	<h2 class="second">这是带有绝对定位的标题</h2>
	<div id="third">这是另一个div</div>
	<div id="four">一个咯</div>
</body>
</html>