前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >(2019)[前端]面试题[3]:三大定位,相对定位放在固定定位产生什么影响?

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

作者头像
无道
发布2019-11-13 16:26:57
5060
发布2019-11-13 16:26:57
举报
文章被收录于专栏:无道编程无道编程

问题

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

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

前提

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

https://cloud.tencent.com/developer/article/1538354

解答

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

代码语言:javascript
复制
<div class="parent">
    <div class="child">child</div>
</div
代码语言:javascript
复制
<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将无法撑起父元素高度

代码语言:javascript
复制
.child {

    position: fixed;
    top: 0;
    left: 0;
    height: 20px;
    width: 120px;
    background-color: red;
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-09-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题
  • 前提
  • 解答
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档