html - Bootstrap 和 Z-Index

Question

我在具有 Pinterest 小部件的 div 中包含的 z-index 属性有问题。

在之前的非 Bootstrap 应用程序中，我能够简单地设置 z-index: 2 这将有助于隐藏标题背后的部分 Widget。

这里我设置了标题div和父列div为z-index:1Widget 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>

我也尝试过将 overflow:hidden 放置在小部件 div 中，但我似乎无法让它工作。

My Test Site

如有任何关于此 z-index 的建议，我们将不胜感激。

Answer 1

即使您将 z-index 样式应用于 .headline，也请务必包含适当的 position 规则。 z-index 将仅适用于具有 position 规则而非默认规则的元素

source

由于您的元素呈现为透明，如果您希望“隐藏”此小部件的一部分，设置 background-color 将满足此要求

.headline {
    z-index: 1;
    background-color: white;
    position: relative;
}