今晚来说说CSS中的position属性，其实在实际开发页面过程中，记录一下这个让我迷茫的relative，我将它分为三种情况进行说明
- 包含关系：父级absolute，子级relative；
- 包含关系：父级relative，子级absolute；
- 并列关系：兄弟标签都是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：
a
b
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：
但当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：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/208583.html原文链接：https://javaforall.net
