html - 在电话上以另一个DIV余量与DIV进行交互

我想构建一个显示地图和列表的简单网络应用。该列表应在地图上，并且应可滚动。地图应始终位于同一位置，以使这两个项目像图层一样起作用。

我设法完全使用HTML / CSS来构建它，并且它可以在计算机上运行，但不能在电话（iPhone）上运行。

我的代码如下：

    <style>
    html {
        width: 100%;
        height: 100%;
    }
    .map {
        background-color: yellow;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    .list {
        height: 2000px;
        width: 100%;
        background-color: blue;
        position: relative;
        margin-top: 200px;
        z-index: 1;
        color: white;
    }
    .layer {
        height: 100%;
        width: 100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
    </style>
    <body>
        <div class="map">
            MAP
        </div>
        <div class="layer">
            <div class="list"><a href="#">
                LIST
            </div>
        </div>
    </body>

当我在计算机上而不是在电话上向下滚动列表时，可以与地图进行交互。当我将css-property pointer-events: none;添加到layer-div时，我自然无法单击其中的链接。即使将margin-top从list-div更改为top: 200px，它也不起作用（在电话上）。

我还为此创建了一个jsfiddle。

编辑我用Google Maps应用程序做了一张照片。如您所见，抽屉可以从下到上绘制，但是地图本身保持在原位，因此两者的作用就像两层。

最佳答案

您正在寻找的可能是这样的：

<body>
  <div class="map">
    MAP
  </div>
 <div class="list">
    LIST<br>LIST<br>LIST<br>LIST<br>LIST<br>LIST<br>LIST<br>LIST<br>LIST<br>LIST<br>LIST
 </div>

CSS：

html {
        width: 100%;
        height: 100%;
    }
    .map {
        background-color: yellow;
        position: absolute;
        top: 0;
        left: 0;
        bottom:0;
        right:0;
        z-index: 1;
    }
    .list {
        position:fixed;
        background-color: blue;
        top: 200px;
        bottom:0;
        left:20px;
        right:20px;
        z-index: 2;
        color: white;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
}

http://jsfiddle.net/j8g6A/1/