我的布局是相当简单的，重复的背景元素，一对夫妇的垂直空间（道路）和一些水平桥和一点点车应该推动它们下面的滚动时的。
一切工作就好了我的Mac上，但在iOS设备上测试-My设备：iOS上的iPhone 4在iOS 6.1，iPad 2的6.1.3-的z-index不被尊重时，滚动事件激活。
这意味着，当你滚动的汽车，这是position: fixed的window ，是过了桥移动（具有较高z-index比“汽车”），而不是z-index使桥式更高，因为它应该是在非iOS的浏览器，这使得桥下的车程。
这似乎是一个简单的分层问题，但即使有一个非常简单的测试案例的缺陷是仍然明显。
测试用例： http://plnkr.co/EAE5AdJqJiuXgSsrfTWH （在iPad上全屏视图，以避免iframe中滚动问题，它是不相关的演示内容）
有谁知道什么地方错了，这将导致代码z-index不工作时滚动处于活动状态？
注意：这发生在两个版本，Chrome for iOS和本地移动Safari浏览器。
下面是对运行中的码位减少测试用例我上方连结在壳体有人可以指出的修复，而无需打开演示。
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="car"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
<div class="bridge"></div>
<div class="street"></div>
</body>
</html>
CSS：
body {
/* Adds the 'road' as a background image. */
background: #8BA341 url("http://f.cl.ly/items/1r2g152h2J2g3m1e1V08/road.png") repeat-y top center;
margin: 0;
padding: 0;
}
.car {
/* The car's position is fixed so that it scrolls along with you. */
position: fixed;
top: 5%;
left: 52%;
width: 220px;
height: 330px;
background: #BD6C31;
z-index: 1;
}
.street {
/* Empty in the example, just used to space things out a bit. */
position: relative;
height: 500px;
}
.bridge {
/* A bridge crossing the main road. The car should drive under it. */
position: relative;
height: 353px;
/* Image of repeating road. */
background: url("http://f.cl.ly/items/0u0p2k3z45242n1w3A0A/bridge-road.png") repeat-x center left;
/* Higher z-index than car. */
z-index: 2;
}
