css的z-index、position、overflow属性混合时Safari的兼容问题，fixed定位+z-index同时使用不生效问题

最新推荐文章于 2023-08-16 14:17:36 发布

止喜

最新推荐文章于 2023-08-16 14:17:36 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 css 文章标签： css 定位 html css3 js

本文链接：https://blog.csdn.net/qq_38125058/article/details/107542012

本文讨论了在Safari浏览器中遇到的CSS问题，当position: fixed与z-index结合使用时可能出现的不生效现象。文章详细介绍了两个场景：1) fixed定位、z-index和transform3D变化同时使用导致的覆盖问题；2) 子元素fixed定位被父级overflow: hidden隐藏的问题，并给出了相应的解决方案，包括添加父元素、设置负的translateZ和调整布局方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

～～～转前端啦～～～

问题：position: fixed和z-index同时使用在Safari浏览器中不生效？？？

浏览器版本

场景1: fixed定位+z-index属性+tranform3D变化同时使用

先看代码：

// css部分
<style>
   .header {
   
   
     width: 100%;
     height: 50px;
     background-color: #ccc;
     position: fixed; // 1、重点在这里
     top: 0;
     left: 0;
     z-index: 90;  // 2、在这里
   }
   .sider {
   
   
     width: 200px;
     height: 600px;
     background-color: #3136d8;
     position: fixed;  // 3、这里
     top: 30px;
     left: 30px;
     z-index: 100;  // 4、还有这里
     transform: perspective(1000px) rotateY(45deg); 
     // 5、还有最后这一句---重中之重
   }
</style>
// html
 <div class=