HTML中relative跟absolute
日期：2014-05-16 浏览次数：20774 次
HTML中relative和absolute
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 id="a">
<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>
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 id="a">
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
