小编Jor*_*ink的帖子

这不是一个真正的问题,而是我刚才遇到的问题的解决方案.我在这里发布它,因为我可以想象其他人想要使用它.

我遇到的问题是:我想使用网格系统(span2,span3等)使用具有固定宽度的Twitter Bootstrap(媒体网格模块)来显示方形图块的概述,而不会使标记混乱.

下面的LESS代码开箱即用,是Bootstrap库的扩展:

.squareColumns(@columnSpan: 1) {
    width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
    height: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}

.maxSquareColumns(@columnSpan: 1) {
    max-width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
    max-height: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}

ul.square-media-grid {
    .media-grid;

    li a.span1 { .squareColumns(1); img { .maxSquareColumns(1); } }
    li a.span2 { .squareColumns(2); img { .maxSquareColumns(2); } }
    li a.span3 { .squareColumns(3); img { .maxSquareColumns(3); …

问题

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 …