css深入浅出系列之：绝对定位 position:absolute

最新推荐文章于 2023-11-27 09:20:13 发布

学无止境super

最新推荐文章于 2023-11-27 09:20:13 发布

阅读量1.5k

点赞数 2

分类专栏：前端全栈开发小程序文章标签： css 前端

本文链接：https://blog.csdn.net/qq_43693520/article/details/88364833

版权

前端同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

小程序

8 篇文章 0 订阅

订阅专栏

全栈开发

6 篇文章 0 订阅

订阅专栏

css深入浅出系列只是自己在学习css的时候的一些个人见解，有错误的地方，欢迎在评论中指正噢~

今天主要在以下几个方面来展开：
1、什么是绝对定位
2、如何确定绝对定位元素的定位点
3、absolute与relative的联系

1、什么是绝对定位
首先引用一句w3school关于绝对定位的原话：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

那么，这个已定位祖先元素该如何去理解呢？我们再看w3school的解释
在这里插入图片描述
从对absolute的描述可以看出，已定位祖先元素就是祖先元素的position的值可以是：absolute,fixed,relative,inherit，最经常的取值应该就是relative了。如果没有已定位祖先元素了，就相对于最初的包含块，就是html，屏幕了。

废话不说，上代码举例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.parent-brother {
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
			.parent {
				width: 200px;
				height: 150px;
				background-color: black;
			}
			
			.child {
				position: absolute;
				width: 50px;
				height: 50px;
				background-color: yellow;
				/*top: 0;
				left: 0;*/
			}
		</style>
	</head>

	<body>
		<div class="parent-brother"></div>
		<div class="parent">
			<div class="child">888</div>
		</div>
	</body>

</html>

然后看下这些代码的执行效果
在这里插入图片描述
此时child类的元素块由于position:absolute，所以应该脱离了正常的文档流，由于child类的元素的祖先元素div与body并没有任何的position样式，所以child类元素的左上角定位点理应是位于屏幕左上角的，可是从代码的执行情况来看，我们看到child类左上角的定位点却是位于父元素parent的左上角的，这就涉及到要说的第二个知识点了，元素定义了position:absolute之后，应该如何确定定位点？

2、如何确定绝对定位元素的定位点

当我们把.child样式里面的top:0,left:0注释去掉之后，我们再看下执行效果

在这里插入图片描述
这时我们看到，此时元素的定位符合我们的预期效果了，这是为什么呢？下面分情况说明
情况1：
用户只给元素指定了absolute，未指定left/top/right/bottom。此时absolute元素的左上角定位点位置就是该元素正常文档流里的位置。
情况2
用户给absolute元素指定了left/right，top/bottom
只指定left时，元素的左上角定位点的left值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值；
只指定right时，元素的右上角定位点的right值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值：
以此类推下去…
所以说，要想让position:absolute元素真正脱离文档流，我们还要为它指定left/top/right/bottom，来让元素进行偏移
那么，问题又来了，如果left/top/right/bottom的值是百分比的形式呢，怎样计算？
就拿left来举例，left的百分比值是按离其最近的有定位属性的祖先元素的（内容宽+padding）值来计算的，与祖先元素border无关。不管是哪种盒模型
还是拿上面的代码来举个例子

.parent {
	position: relative;
	width: 200px;
	height: 150px;
	background-color: black;
	padding: 50px;
	/*border: 50px solid green;*/
}
	
.child {
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: yellow;
	top: 10%;
	left: 10%;
}

效果
在这里插入图片描述
当把.parent里面/border: 50px solid green;/的注释去掉时，效果如下

可以看到，absolute元素的父元素定义了relative，一次无border，一次有border，left:10%的值都是30px = ((内容宽200px+padding(50px+50px))*10%)
如果我们把父元素的position:relative去掉，这时由于absolute元素没有已定位祖先元素，所以left:10%的值是相对了屏幕宽度了。
在这里插入图片描述

3、absolute与relative的联系
经常的用法，在定义了absolute元素的父元素上使用position:relative，这样，元素就可以相对于父元素进行任意基于父元素位置的定位了，常见的应用场景是图标右上角的消息提示
在这里插入图片描述

学无止境super

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css深入浅出系列之：绝对定位 position:absolute

css深入浅出系列只是自己在学习css的时候的一些个人见解，有错误的地方，欢迎在评论中指正噢~今天主要在以下几个方面来展开：1、什么是绝对定位2、如何确定绝对定位元素的定位点3、absolute与relative的联系1、什么是绝对定位首先引用一句w3school关于绝对定位的原话：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包...
复制链接

扫一扫