CSS 在 iOS 设备上滚动时，元素的 z-index 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16033416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
While scrolling on an iOS device, the z-index of elements isn't working
提问by Jannis
My layout is fairly simple, a repeating background element, a couple of vertical spaces (roads) and some horizontal bridges and a little car which should drive underneath them when you scroll.
我的布局相当简单，一个重复的背景元素，几个垂直空间（道路）和一些水平桥梁和一辆小车，当你滚动时应该在它们下面行驶。
Everything works just fine on my Mac but on iOS devices —my testing devices are: iPhone 4 on iOS 6.1, iPad 2 on iOS 6.1.3— the z-indexisn't being honoured when the scroll event is active.
在我的 Mac 上一切正常，但在 iOS 设备上——我的测试设备是：iOS 6.1 上的 iPhone 4，iOS 6.1.3 上的 iPad 2——z-index滚动事件处于活动状态时不会受到尊重。
This means that as you scroll, the car, which is position: fixedto the window, is moving over the bridge (which has a higher z-indexthan the "car") rather than the z-indexmaking the bridge higher as it should be and is on non-iOS browsers which makes the car drive under the bridge.
这意味着，当您滚动时，position: fixed通往的汽车window正在桥上移动（它的高度z-index高于“汽车”），而不是z-index使桥变得更高，并且在非 iOS 浏览器上使汽车在桥下行驶。
It seems like a simple layering issue, but even with a very simplified test case the bug is still apparent.
这似乎是一个简单的分层问题，但即使使用非常简化的测试用例，该错误仍然很明显。
Test case: http://plnkr.co/EAE5AdJqJiuXgSsrfTWH(view in full screen on iPad to avoid a iframe scrolling issue which isn't related to the demo content)
测试案例：http: //plnkr.co/EAE5AdJqJiuXgSsrfTWH（在 iPad 上全屏查看以避免与演示内容无关的 iframe 滚动问题）
Does anyone know what's wrong with the code which would cause the z-indexnot working while the scroll is active?
有谁知道代码有什么问题会导致z-index滚动处于活动状态时无法工作？
Note:This happens on both, Chrome for iOS and the native Mobile Safari.
注意：这在 iOS 版 Chrome 和原生 Mobile Safari 上都会发生。
Here are the code bits running on the reduced test caseI linked to above in case someone can point out a fix without opening the demo.
这是我在上面链接的简化测试用例上运行的代码位，以防有人可以在不打开演示的情况下指出修复。
HTML:
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:
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;
}
回答by Lost Left Stack
I believe I've solved this after much trial and error. What I did was add a webkit transformto the bridges. This allows for positive z-index numbers (car at 10, pothole at 1, bridge at 20):
我相信经过多次试验和错误，我已经解决了这个问题。我所做的是webkit transform在桥梁上添加一个。这允许正 z-index 数（汽车在 10，坑洼在 1，桥在 20）：
new CSS:
新的 CSS：
.bridge {
-webkit-transform: translate3d(0,0,0);
}
Adding the translate to the different bridges seem to not only fix the flicker from before, but also lets you scroll immediately without any delay.
将翻译添加到不同的桥似乎不仅可以修复之前的闪烁，而且还可以让您立即滚动而没有任何延迟。
Check it out in full screenor the full Plunker. Tested on iPad iOS 6.0.1.
在全屏或完整的 Plunker 中查看。在 iPad iOS 6.0.1 上测试。
