以下这个小 demo，在 safari 和 chrome/firefox 下表现不同。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html,body{
overflow-x: hidden;
}
#parent1{
position:relative;
z-index:1
}
#child1{
background-color:brown;
position:fixed;
}
#parent2{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#child2{
position: relative;
}
</style>
</head>
<body>
<div id="parent1">
<div id="child1">1111111</div>
</div>
<div id="parent2">
<div id="child2"></div>
</div>
</body>
</html>
部分浏览器测试结果如下：
- windows 10 chrome 80.0.3987.87 （ 64 位） “111111” 内容可见
- windows 10 firefox 72.0.2 (64 位) “111111” 内容可见
- mac os 10.14.3 safari 12.0.3 “111111” 不可见
- ios 13.3.1 safari “111111”不可见
另外在 safari 下去掉 child2 元素，111111 也可见。 个人是觉得 safari 表现不正常。
Select Language