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;
}
定位参照元素的问题。
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的元素不可以.
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。