定位： relative和absolute区别

最新推荐文章于 2025-12-19 15:33:32 发布

原创最新推荐文章于 2025-12-19 15:33:32 发布 · 430 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #html #文档 #c

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了CSS中relative和absolute定位的使用方法及区别。通过具体的HTML示例代码展示了不同定位属性如何影响元素的位置，并解释了它们相对于何种参照物进行偏移。

<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>