辛星和你彻底搞清CSS中的相对定位和绝对定位

最新推荐文章于 2025-09-07 23:02:49 发布

辛星

最新推荐文章于 2025-09-07 23:02:49 发布

阅读量1.1k

点赞数 3

CC 4.0 BY-SA版权

文章标签：布局 css 辛星绝对定位相对定位

本文链接：https://blog.youkuaiyun.com/xinguimeng/article/details/38067951

本文深入解析了CSS中相对定位与绝对定位的区别与用法。通过实例代码展示了两种定位方式的效果，并解释了绝对定位元素如何相对于其最近的已定位祖先元素进行定位。

前面我在解读CSS中也说过了关于相对定位和绝对定位的问题，无奈还是有些童鞋表示迷茫，于是另开一篇博客，来详细解读相对定位和绝对定位，希望能够以我的点点星光，让后来者少走弯路。

所谓相对定位，就是设置为相对定位的元素会偏移某个距离，元素仍然保持原来的样式，它会保留该HTML元素的空间，比如我们看如下代码：

.demo{
position: relative;
width:50px;
height: 50px;
left:50px;
}

它会出现在相对原来的地方向右50px的地方，而它原来所在的地方为空。

下面说一下绝对定位，所谓绝对定位，即不占用空间，如果原来这个地方有HTML元素，那么就会重叠，这里需要特别之处的，也是我发这篇博文的目的，就是想告诉大家，绝对定位如果被父元素包含，如果父元素没有定位属性，它会根据body进行定位，因此，如果它有父元素，必须在父元素中指定定位属性，如下代码：

<html>
<head>
	<title>辛星解读绝对定位和相对定位</title>
	<style type="text/css">
	.father{
		position: relative;
		width:300px;
		height: 300px;
		margin: 0 auto;
		border: 1px solid orange;
		}
	.sun{
		position:absolute;
		background:purple;
		width:50px;
		height: 50px;
		left: 50px;
		}
	</style>
</head>
<div class = "father">
	<div class = "sun"></div>
</div>
</html>

效果图：

可能有童鞋会问，如果我们不指定父元素的定位又会如何呢？请看下面代码，我把css代码中的哪一行给注释掉之后，源代码如下：

<html>
<head>
	<title>辛星解读绝对定位和相对定位</title>
	<style type="text/css">
	.father{
		//position: relative;
		width:300px;
		height: 300px;
		margin: 0 auto;
		border: 1px solid orange;
		}
	.sun{
		position:absolute;
		background:purple;
		width:50px;
		height: 50px;
		left: 50px;
		}
	</style>
</head>
<div class = "father">
	<div class = "sun"></div>
</div>
</html>

然后是它的效果图：