定位： relative和absolute区别_relative 定位区别

作者：weixin_40725706 | 2024-07-30 23:56:28

踩

relative 定位区别

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS--Position</title>

<style>
#box1{
/*position:relative;*//*由于父级没有position定义，box1就以页面的左上角为参照点*/
width:200px;
height:100px;
background-color: #0C0;
padding:10px;

}

#box{
position:relative;/*由于父级没有position定义，box就以页面的左上角为参照点*/
width:200px;
height:100px;
background-color: #000;
padding:10px;
top:50px;
left:100px;
}

#boxb{
position:relative;/*由于父级没有position定义，box1就以页面的左上角为参照点*/
width:400px;
height:200px;
background-color: #F0F;
padding:10px;
top:50px;
left:100px;
}

#first{
position:absolute;/*相对于最近的，有position定义的，父级元素box1的，左顶点，为参照点*/
top:0px;
left:0px;
width:120px;
background-color: #60F;
}
#second{
position:relative;/*本对于紧挨着的，父级(box1)的，正文(box有padding定义)的，左顶点，为参照点*/
top:10px;
left:10px;
width:120px;
background-color: #00F;
}
</style>

</head>

<body>
<div id="box">Box正文1

</div>
<div id="boxb">
<div id="box1">Box正文2
    <div id="first">First</div>
    <div id="second">Second</div>
</div>
</div>

<div style="position:relative; top:50px; left:100px;">
<p >总结</p>
<p> relative:相对于正常位置的偏移，只是偏移，自己原来的位置还在，偏移不占位置</p>
<p> absolute:相对于父类position的左上角位置的偏移，如果没有父类，侧以body的左上角位置为起点，不在文档流，就是没有自己的位置</p>
</div>

</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/905925