我想构建一个移动应用程序界面，它基本上显示两个不同的东西，一个列表和一个地图。但是我没有在底部有一个带有两个条目的普通水龙头，而是希望用图层显示两个东西（例如Google Maps App（在iOS上），您可以在其中将抽屉从底部拖到顶部并与之交互，但当抽屉再次位于底部时，您还可以与底层地图进行交互。）
好照片是that one（地图应该是列表视图下方的全屏，您应该可以将列表拖到顶部，然后在列表中滑动，但也可以在地图可见时与地图互动（捏缩放等）。）。
我想要构建一个map-div，其z-index低于list-div，list-div top-padding 200px list-div地图始终可见一点，列表不在顶部，并为.png提供透明的list-div背景。 但是然后map-div顶部的区域无法点击，因此我无法与下方的list-div进行互动（因为填充和透明背景<html>
<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: 1000px;
width: 100%;
background-color: blue;
position: relative;
margin-top: 200px;
z-index: 1;
}
.layer {
height: 100%;
width: 100%;
overflow: scroll;
}
</style>
<body>
<div class="map">
<h1>Map</h1>
</div>
<div class="layer">
<div class="list">
<h1>List</h1>
</div>
</div>
</body>
</html>
）。
这可以用普通的CSS吗？
编辑：我认为我得到的解决方案如下：
{{1}}