transform影响position: fixed的解决方法

transform影响position: fixed原因在于transform提升了元素的地位,在W3C规范中有如下说明:

For elements whose layout is governed by the CSS box model, any value other than none for the transform also causes the element to become a containing block, and the object acts as a containing block for fixed positioned descendants

在transform不为none的元素中,定位是会受到影响的。

解决方法

在不影响布局的情况下,可以直接把要定位的元素移动到body下:

1

2

3

4

5

<body>

  <div class="BFC-box"></div>

  <div class="container">

  </div>   

</body>   

如果是在组件中不方便对元素进行操作,可以使用js,以vue为例:

1

2

3

4

<div ref="container" class="container"></div>

mounted(){

  document.body.append(this.$refs['contaier'])

}

猜你喜欢

转载自blog.csdn.net/ferwagrea/article/details/129840443