5

问题

iOS 6 似乎为每个后代创建了一个新的堆叠上下文，而position不是static不管是否z-index设置。

有谁知道这是否是正常的预期行为，或者这是一个-webkit-overflow-scrolling干扰堆叠顺序的错误？

例子

请参阅下面的代码或JSFiddle

两个row元素都有位置relative，但没有z-index。我笔记本电脑上的 Google Chrome 和 Safari 都在第二个row.

在 iOS 模拟器上测试示例时，“子菜单”呈现在第二个row. 删除-webkit-overflow-scrolling: touch它后，它就像我预期的那样呈现。

在我看来，添加-webkit-overflow-scrolling: touch为每个后代创建了一个新的堆叠上下文，并且static无论是否z-index设置了位置。

<style>
    div.content {
        -webkit-overflow-scrolling: touch;
    }

    div.row {
        width: 100%;
        position: relative;
        background: red;
        margin-bottom: 10px;
    }

    div.sub {
        position: absolute;
        top: 100%;
        z-index: 2;
        background: blue;
    }
</style>
<div class="content">
    <div class="row">
        A
        <div class="sub">
            Sub menu of A<br>
            Sub menu of A<br>
            Sub menu of A<br>
            Sub menu of A<br>
        </div>
    </div>
    <div class="row">
        B
    </div>
</div>

```

** 附加说明 ** 我想用“-webkit-overflow-scrolling”标记这篇文章，但我没有足够的声誉来创建一个新的。

4

0 回答 0