不受控制的position:fixed(什么情况下fixed不会基于浏览器窗口定位)

  • 2019-01-25
  • 0
  • 0

众所周知fixed是基于浏览器窗口定位,然而今天遇到个问题,发现fixed并不一定是这样,在css2时代这个可能没问题,但是css3时代,就有一个例外会使fixed是基于祖先元素定位

  • 当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先。
    简单代码理解下:
<div class="container" style="transform:rotate(360deg);">
    <div>
        <div class="box" style="position:fixed;"></div>
    </div>
</div>

box设置了fixed定位,正常情况是基于浏览器窗口定位,但是向上一路寻找,如果找到有祖先元素的transform不为none,就会基于这个祖先元素定位,这里box会基于container元素进行fixed定位。
如果实际开发中,box要求基于浏览器窗口定位,那么就要把它放到container同级去,如下:

<div class="container" style="transform:rotate(360deg);">
    <div></div>
</div>
<div class="box" style="position:fixed;"></div>

如果有遇到fixed要基于父级定位的需求,利用这个特性就可以做到,但是需要注意的地方,这个貌似不同浏览器内核表现还不一样,所以慎用。

注:在 MAC 下的 Safari 浏览器(WebKit内核,Version 9.1.2 (11601.7.7))和 IE Trident/ 内核及 Edge 浏览器下,上述三种方式都不会改变 position: fixed 的表现!

什么原因造成的可以看看张大大这篇文章深入理解CSS中的层叠上下文和层叠顺序
当你看完张老师这篇文章,你会发现不止这种情况会让fixed失效,还有很多很多种,张大大举了9个

评论

还没有任何评论,你来说两句吧