开发者社区> 问答> 正文

absolute和relative的区别很大?

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

展开
收起
a123456678 2016-05-27 17:12:26 1974 0
1 条回答
写回答
取消 提交回答
  • 定位参照元素的问题。
    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的元素不可以.

    2019-07-17 19:18:22
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载