absolute和relative的区别很大?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

absolute和relative的区别很大?

a123456678 2016-05-27 17:12:26 1261

1,为什么给absolute设置height:100%有作用,给relative设置的话就不会起作用?

2,absolute和relative对子类带有float的元素会有差异?
如果把div1换成relative就不会包裹div3,不知是为什么?

<div class="div1">
    <div class="div2">
        <div class="div3"></div>
        <div class="div4"></div>
    </div>
</div>
.div1{
    border:3px solid red;
    position:absolute; 
}
.div2{
    background:yellow;
    width:200px;
}
.div3{
    float:left;
    width:50px;
    height:300px;
    background:orange;

}
.div4{
    width:100px;
    height:100px;
    background:blue;
}
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:18:22

    定位参照元素的问题。
    absolute元素的定位参照元素为其父辈元素中第一个非static定位的元素,若其父辈元素均为static定位,则其定位参照元素为初始包含块,这里可以理解为 html 元素。
    设置height:100%中100%是相对定位参照元素来说,因此为relative的元素设置100%不会产生效果,因为其相对body定位,而body的默认高度为0。而为absolute的元素设置100%产生效果是因为初始包含块的高度为 viewport 的高度。
    这里如果将 body 设置position: relative,则absolute和relative元素将具有相同的 height 表现
    BFC 问题。
    由于position:abolute会使当前块级元素称为一个 BFC 容器(通常称为触发 BFC),而包裹所有浮动元素是 BFC 容器的特性,position:abolute的元素可以包裹浮动元素而position:relative的元素不可以.

    0 0
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章