CSS中的position:relative理解

今晚来说说CSS中的position属性,其实在实际开发页面过程中,记录一下这个让我迷茫的relative,我将它分为三种情况进行说明

  1. 包含关系:父级absolute,子级relative;
  2. 包含关系:父级relative,子级absolute;
  3. 并列关系:兄弟标签都是relative;

1.最具常见的用法就是父级标签relative,子级标签position来做到无论浏览器如何改变,都是相对浏览器的定位。

css:
#a{
	height:200px;
	width:200px;
	position: relative;
	background-color:red;
	left:50px;
	top:50px;
}
#b{
	height:50px;
	width:50px;
	position: absolute;
	background-color:green;
	left:20px;
	top:20px;
}
html:
<div id = "a">a
    <div id = "b">b
    </div>
</div>

 

在这里插入图片描述

2.正常情况下同1的效果,不过需要注意的是,当标签中包含文字时,relative会发生调整。
在这里插入图片描述
在这里插入图片描述
3.当不存在父级元素包裹时,relative的相对位置是根据最近的一个兄弟作为参考的。

css:
#a{
	height:200px;
	width:200px;
	position: relative;
	background-color:red;
}
#b{
	height:200px;
	width:200px;
	position:relative;
	background-color:green;
	left:50px;
	top:50px;
}
html:
<div id = "a">
</div>
<div id = "b">
</div>

在这里插入图片描述
但当a标签也设置了left、top等相关属性时,兄弟标签b继续以a变化前作为参考相对位置。

css:
#a{
	height:200px;
	width:200px;
	position: relative;
	background-color:red;
	left:50px;
	top:50px;
}
#b{
	height:200px;
	width:200px;
	position:relative;
	background-color:green;
	left:20px;
	top:20px;
}
html:
<div id = "a">
</div>
<div id = "b">
</div>

在这里插入图片描述

转载自:https://blog.csdn.net/gamenoover/article/details/90614014

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页