深入理解CSS绝对与相对定位

马黑黑 · 发表于 2022-1-12 09:00

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

有一种误解认为，position的绝对定位absolute是针对浏览视窗而言的，即当元素的position设定了absolute，那么，元素的left和top若分别设定为0，则元素必定会出现在浏览器视窗区域的左上角。

其实，绝对定位在特定情况下也是相对的。试看如下例子：

<style type="text/css">

.爹 {
	width: 400px;
	height: 400px;
	left: 600px;
	border: 1px solid deeppink;
	position: relative;
}

.孩 {
	position: absolute;
	width: 100px;
	height: 100px;
	left: 0;
	top: 0;
	background: royalblue;
}
</style>

<div class="爹">
	<div class="孩">Hello CSS</div>
</div>

这里，父框“.爹”类选择器定义自己为相对定位，子框“.孩”则定义自己为绝对定位，再看HTML代码div的嵌套结构可知是“爹”嵌套“孩”的布局，叫“爹”的那个div是父div，叫“孩”的那个div是子div。由于相对定位的元素做了绝对定位的元素的爹，绝对定位的孩儿只能限制在爹的势力范围里，更准确地说，孩儿的绝对定位须以也设定了定位的当爹的元素为坐标参照，不论这个爹自身如何定位。所以，上述例子，尽管“孩”选择器定义了绝对定位且xy边界坐标均设定为0，它出现的位置不是在浏览器的阅读区域的左上角，而是在“爹”框的左上角。

如果“爹”选择器没有定位，情形又会如何？

那就先看爹的爹，往上寻祖，一直找到<body>为止。找的过程中，碰上的第一个有血缘关系即嵌套关系的、定义了position的祖先元素，这个“孩”的绝对定位就受它的影响、所做的xy坐标定位以它和自身为参照，如果都没找到，恭喜孩儿，它自由了，可以以自己的xy定位坐标值任意在浏览器阅读区域内驰骋。当然，自设为绝对定位的孩儿在受到父辈或先祖们影响的情况下依然可以将自己定位到浏览器视界的任意处，只是left和top值的设定要算上影响者的位置。

而设定为相对定位的元素，不论父元素设定定位与否，它都是相对于父元素而言，所做定位以自身位置和父元素位置为参照。

扩展知识：绝对定位absolute若设定元素完全离开了自己文档流的位置（比如设置了大于自身高宽的top和left值），它原来所处的占位位置被清零，它后面的元素自然而然地占据它的位置，亦即它后面的文档流所描述的元素一块儿流动上来。而相对位置relative全然不同，元素完全离开了自己原文档流的位置后，那个位置还霸占着——它拥有两个户籍，分别在两个城市（或许因为在另一个城市买了房产？）。

思考：固定定位 fixed 会受到父元素的影响吗？