蔡cai
蔡cai
  • 发布:2024-06-14 10:23
  • 更新:2024-06-14 10:23
  • 阅读:33

position:fixed 没有相对浏览器窗口定位的原因 transform冲突(使用uni-popup组件)

分类:uni-app

来源:https://blog.csdn.net/kaosini/article/details/118760075

遇到一个有意思的现象, fixed 的元素没有相对 viewport 定位,而是相对于它的父元素进行定位了。

逐一排查后 ,发现是transform捣乱了。

fixed 元素的块级格式上下文 Block Formatting Context(BFC) 由 viewport 创建,也就是fixed 元素的 BFC 包含在根元素的 BFC 里

w3c 对 transform 的[定义]():

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.  

大概意思就是,transform 属性使元素创建了新的 BFC,所有的子元素都被包含在这个新的 BFC 内。那么设置了 position: fixed 的子元素 BFC 被包含在了 transform 元素的 BFC 里。

0 关注 分享

要回复文章请先登录注册