HTML中relative和absolute解释

最新推荐文章于 2024-10-09 11:16:57 发布

Sir_LuciFer

最新推荐文章于 2024-10-09 11:16:57 发布

阅读量2w

点赞数 4

文章标签： html 浏览器 div border 文档 css

position属性其实是指本体对上级的定位。默认的属性值都是static

，静态。
最关键的是relative（相对）以及absolute（绝对）。

如：
<style>
#a{
position:relative;
width:100px;
height:100px;
background:#999;
}
#b{
position:absolute;
height:10px;
width:100%;
background:blue;
bottom:0px;
}
</style>
<div >
<div id="b">B</div>
</div>
当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。
position:absolute: 绝对定位，是参照浏览器的左上角 ，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

position:relative : 相对定位，是参照父级的原始点 为原始点，无父级则以BODY的原始点为原始点，配合TRBLE进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
注意:相对在无父级时以BODY 为原始点,而绝对是以浏览器最左上角为原始点.
下面实例说明上面这句话:
<style>
#wrap{
width:500px;
background-color: red;
height:auto;
}
#column1{
position:absolute;
top:0px;
left:0px;
width:300px;
background-color: green;
}
#column2{
position:relative;
top:0px;
left:0px;
width:470px;
background-color: #FFFF66;
}
</style>
<body style="border:4px blue dotted"> /*这里我用框框出来,好识别*/
<div id="wrap">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
</div>
</body>