twitter-bootstrap Z-Index 在 Safari 上不起作用 - 在 Firefox 和 Chrome 上很好
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40895387/
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
Z-Index not working on Safari - fine on Firefox and Chrome
提问by manicatorman
The Z-index isn't rendering properly on Safari - but it is working fine on Chrome and Firefox. I can't figure out what the Safari specific bug would be.
Z-index 在 Safari 上无法正确呈现 - 但它在 Chrome 和 Firefox 上运行良好。我无法弄清楚 Safari 特定的错误是什么。
Here is the relevant code:
这是相关的代码：
.flex-container{
display: inline-flex;
align-items: center;
justify-content: center;
}
.flex-item{
margin-left: 14%;}
#inner-ul2{
margin-left: 70px;}
#inner-navbar{
z-index: 1;
background-color: white;
overflow: hidden;
margin-top: 50px;
box-shadow: 0px 10px 10px #444444;}
.inner-buttons{
background-color: white;
overflow: hidden;
color: black;
font-family: Roboto;
font-weight: 300;
font-size: large;}
.inner-buttons-left{
overflow: hidden;
margin-right: 45px;}
.inner-buttons-right{
overflow: hidden;
margin-left: 40px;}
#inner-logo{
position:fixed;
z-index: 2;
display: inline-block;
float: none;
height: 100px;
width: 120px;
margin-top: -20px;
margin-left: -25px;
margin-right: auto;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 0px 20px 10px -10px #444444;
}
.navbar .navbar-nav{
display: inline-block;
float: none;
vertical-align: middle;}
#slider{
z-index: -1;
padding: 0;
overflow: hidden;
border-style: none;
margin-top: 30px;
margin-bottom: 0px;}<div class="row-fluid">
<div class="navbar subnav navbar-fixed-top" id="inner-navbar">
<div class="navbar-inner">
<div class="flex-container">
<span class="flex-item"><ul class="nav navbar-nav" id="inner-ul">
<li><a class="inner-buttons inner-buttons-left" href="/home/">HOME</a></li>
<li><a class="inner-buttons inner-buttons-left" href="#">SHOP</a></li>
<li><a class="inner-buttons inner-buttons-left" href="#">OPPORTUNITY</a></li>
</ul>
<ul class="nav navbar-nav">
<li href="#"><img id="inner-logo" src="http://placehold.it/120x100"></li></ul>
<ul class=" nav navbar-nav" id="inner-ul2">
<li><a class="inner-buttons inner-buttons-right" href="#">ABOUT US</a></li>
<li><a class="inner-buttons inner-buttons-right" href="#">HAPPENINGS</a></li>
<li><a class="inner-buttons inner-buttons-right" href="#">CONTACT</a></li></ul>
</span></div>
</div>
</div>
</div>
<div class="row-fluid">
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="{{ url_for('static', filename='images/ProductsSlider.jpg') }}">
</li>
<li>
<img src="{{ url_for('static', filename='images/NaturalSlider.jpg') }}">
</li>
<li>
<img src="{{ url_for('static', filename='images/ExcellSlider.jpg') }}">
</li>
</ul>
</div>
<!--/div-->
</div>And here are some images showing the differences between the browser looks:
以下是一些显示浏览器外观差异的图像：
I am using both Bootstrap and JQuery.
我同时使用 Bootstrap 和 JQuery。
Thanks for the help!
谢谢您的帮助！
回答by Jayesh
This should probably fix your issue on safari
-webkit-transform:translate3d(0,0,0);
这应该可以解决您在 safari 上的问题
-webkit-transform:translate3d(0,0,0);
回答by Syden
Note that z-indexonly works on positioned elements (position:absolute, position:relative, or position:fixed). An applicable fiddle would help but I'd suggest trying a few positiontweaks on #inner-navbar& #slider.
请注意，z-index仅适用于定位的元素（position:absolute，position:relative，或position:fixed）。适用的小提琴会有所帮助，但我建议尝试position对#inner-navbar&进行一些调整#slider。
回答by coreyward
If you're using translateZor translate3don another element on the site, you might find that a zeroed out translate3ddoesn't do you any good. It turns out that Safari considers the Z axis position of an object that has been transformed when determining where to draw it instead of utilizing z-index.
如果您正在使用translateZ或translate3d站点上的其他元素，您可能会发现归零translate3d对您没有任何好处。事实证明，Safari 在确定绘制对象的位置时会考虑已变换对象的 Z 轴位置，而不是使用z-index.
Thus, this would result in the first divshowing above the second:
因此，这将导致第一个div显示在第二个上方：
<div style="position: fixed; transform: translateZ(100px); z-index: 1;" />
<div style="position: fixed; transform: translate3d(0, 0, 0); z-index: 2;" />
The solution is to apply a greater-value z-axis transformation to the element you'd like drawn on the topmost layer:
解决方案是对要绘制在最顶层的元素应用更大值的 z 轴变换：
.on-top {
transform: translate3d(0, 0, 200px);
}
It's still a good idea to keep the z-indexdeclaration for other browsers.
保留z-index其他浏览器的声明仍然是一个好主意。
回答by manicatorman
The problem is the overflow:hiddenelement on the inner-navbarclass. I'm not sure why it worked on Chrome and Firefox with that being present.
问题是类overflow:hidden上的元素inner-navbar。我不确定为什么它在 Chrome 和 Firefox 上工作，并且存在。
回答by stoneskin
I have a dropdown menu z-index not works. and I spend hours trying different things, but all not works. Jayesh's answer gives me hint, after I add it to my first line of css class
我有一个下拉菜单 z-index 不起作用。我花了几个小时尝试不同的东西，但都不起作用。在我将它添加到我的 css 类的第一行之后，Jayesh 的回答给了我提示
It fixed like a charm.
它像魅力一样固定。
{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: absolute;
z-index: 1000;
}
}
