三大定位,相对定位放在固定定位产生什么影响?
Hello,欢迎来到我的博客,每天一道面试题,我们共同进步。
前面文章已经说过了,相对定位和固定定位,都会使块级元素产生BFC。
https://cloud.tencent.com/developer/article/1538354
1、设置父元素为固定定位,不设置高度,内部child设置高度和宽度,根据BFC内部box垂直排列的特征:
<div class="parent">
<div class="child">child</div>
</div
<style>
.parent {
margin-top: 100px;
position: fixed;
top: 0;
left: 0;
width: 300px;
background-color: #eee;
}
.child {
height: 20px;
width: 120px;
background-color: red;
}
</style>
2、若将内部child设为绝对定位,即内部child会产生BFC,根据BFC与外部互不影响的特征,内部child将无法撑起父元素高度
.child {
position: fixed;
top: 0;
left: 0;
height: 20px;
width: 120px;
background-color: red;
}