Question

我的问题仅在 iO （在Safari和Opera上）发生，并且在Chrome，Firefox和Windows和Android上的Opera上都可以正常工作。

我有以下情况：

<div class="flex-box-parent">
    <div class="group01">
        <div class="fixed-element">
            This element has a position: fixed and z-index: 100
        </div>
    </div>
    <div class="group02">
        On iOS, fixed-element does not cover this part
    </div>
</div>

我需要将fixed元素显示在网站的所有其他内容之上，因为它是具有全屏背景的模式。不幸的是，没有显示fixed-element大于group01的所有内容。

group01或group02均未指定z-index。在Windows / Android上可以正常运行，但在iOS上，group02始终在上面。

CSS

.flex-box-parent{
    position: relative;
    display: flex;
    flex-direction: column;
}
.fixed-element{
    z-index: 100;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

.group01{
    position: relative;
    flex: 1;
    overflow: auto;
}

.group02{
  display: flex;
  flex-direction: column;
  position: relative;
}

更多信息＃1

作为测试，我删除了CSS中对z-index的所有单个引用，但fixed-element除外。仍然无法在iO上工作（在其他一切上工作）

更多信息＃2

问题似乎在于fixed-element不能在iOS上超出其父级的边界。在我看来，group02高于固定元素，但实际上fixed-element根本无法全屏显示，除非它意味着变得比group01大。我仍在寻找解决此问题的方法。

Answer 1

在html中，类.fixed-element的共享div标签未关闭。请解决该问题并检查

仅在iO上，嵌套的固定元素不能大于父元素

1 个答案: