Html Bootstrap 和 Z-Index
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30108750/
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
Bootstrap and Z-Index
提问by Paul
I'm having an issue with z-index attribute that I have included within a div that has a Pinterest Widget.
我在包含 Pinterest 小部件的 div 中包含的 z-index 属性有问题。
In a previous application that wasn't Bootstrap, I was able to simply set z-index: 2 which would help hide part of this Widget behind the Headline.
在以前的不是 Bootstrap 的应用程序中，我可以简单地设置 z-index: 2 这将有助于隐藏标题后面的这个小部件的一部分。
Here I have set the headline div and the parent column div to z-index:1 The Widget div and it's parent div to z:index:2
在这里，我将标题 div 和父列 div 设置为 z-index:1 小部件 div 及其父 div 设置为 z:index:2
<div class="col-md-4 md-margin-bottom-20 hidden-sm hidden-xs" style="z-index:1">
<div class="">
<div class="col-sm-12 col-md-12" style="padding-left: 0; padding-right: 0; z-index:1;">
<div class="headline" style="z-index:1;">
<h2>Recent Job Pictures</h2>
</div>
<div class="" style="z-index:2;">
<div style="margin-top:-46px; z-index:2;">
<a data-pin-do="embedUser" href="http://www.pinterest.com/davincispainter/" data-pin-scale-width="65" data-pin-scale-height="162" data-pin-board-width="360"></a>
</div>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
</div>
</div>
</div>
</div>
I have also tried placing overflow:hidden within the widget div, but I can't seem to get it to work.
我也试过将溢出：隐藏在小部件 div 中，但我似乎无法让它工作。
Any suggestion regarding this z-index would be appreciated.
任何有关此 z-index 的建议将不胜感激。
回答by scniro
Even though you have a z-indexstyle applied to .headline, be sure to also include an appropriate positionrule. z-indexwill only apply to elements with a positionrule other than the default
即使您将z-index样式应用于.headline，也一定要包含适当的position规则。z-index将仅适用于具有position除默认规则以外的规则的元素
Since your element is rendered as transparent, if you wish to "hide" part of this widget, setting a background-colorwill satisfy this
由于您的元素呈现为透明，如果您希望“隐藏”此小部件的一部分，设置 abackground-color将满足这一点
.headline {
z-index: 1;
background-color: white;
position: relative;
}
回答by jmarc
Z-index only effects elements that have a position value other than "static" (the default).
Z-index 只影响位置值不是“static”（默认）的元素。
回答by doc holiday
1.)
1.)
Assure your declaring a position with z-index;in your case, position: relative;is most optimal.
确保您z-index;在您的情况下声明位置position: relative;是最佳的。
2.)
2.)
Make sure your declaring z-index:higher then that of which is pulled in by pintrest API / iframe.
确保您的声明z-index:高于 pintrest API / iframe 拉入的声明。
3.)
3.)
Make sure you even need z-index;try just adding position: relative;to your element in Q.
确保您甚至需要z-index;尝试仅添加position: relative;到 Q 中的元素。
.headline {
// your styles
position: relative;
}
4.)
4.)
If nothing else works.. you can force it there with position: absolute;and z-index;(though not recommended)
如果没有其他效果..你可以用position: absolute;and强制它z-index;（虽然不推荐）
回答by Alex Pandrea
In my particular case absolute positioning did the trick. Relative positioning was pushing down other bootstrap elements.
在我的特殊情况下，绝对定位起到了作用。相对定位推低了其他引导元素。
.headline {
z-index: 2147483647;
position: absolute;
}
