(2019)[前端]面试题[3]:三大定位,相对定位放在固定定位产生什么影响?

无道 2019-09-29 0 条评论 前端相关 阅读34 手机阅读

问题

三大定位,相对定位放在固定定位产生什么影响?

Hello,欢迎来到我的博客,每天一道面试题,我们共同进步。

前提

前面文章已经说过了,相对定位和固定定位,都会使块级元素产生BFC。

https://www.misiyu.cn/article/96.html

解答

1、设置父元素为固定定位,不设置高度,内部child设置高度和宽度,根据BFC内部box垂直排列的特征:

截图-1569756926

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

截图-1569757112

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
修改: 09月29日 19:41
这篇文章还没有评论呢~
点击刷新/生成验证码