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

• 2019 年 11 月 13 日
• 筆記

问题

三大定位，相对定位放在固定定位产生什么影响？

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

前提

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

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

解答

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