Html Bootstrap和Z索引

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

在以前的一个不是引导的应用程序中，我可以简单地设置z-index:2，这将有助于将这个小部件的一部分隐藏在标题后面

在这里，我将headline 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>

最近的工作照片

我还尝试将overflow:隐藏在widget div中，但我似乎无法让它工作

---

如果您对z-index有任何建议，我们将不胜感激。

即使您对

应用了
z-index
样式。headline

，也请确保包含适当的

位置规则<代码>z索引

将仅适用于具有

位置

规则而非默认值的元素

由于元素呈现为透明，如果希望“隐藏”此小部件的一部分，设置

背景色将满足此要求

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

Z索引只影响位置值不是“静态”（默认值）的元素。
1.

确保您使用
z-index声明一个职位在您的情况下，
位置：相对是最理想的

2。）

确保声明的
z-index:
高于pintrest API/iframe拉入的值

3。）

确保您甚至需要
z索引尝试添加
位置：相对到Q中的元素

.headline { 
    // your styles
    position: relative;
}

4。）

如果没有别的办法。。您可以使用
位置：绝对值将其强制到那里和
z-指数（虽然不推荐）
在我的特殊情况下，绝对定位成功了。相对定位向下推其他引导元素

.headline { 
    z-index: 2147483647;
    position: absolute;    
}

您的pinterest小部件具有
页边距顶部：-46px
。这是故意的吗？@AnthonyValera是的，我想隐藏小部件的标题部分。我将两种样式都添加到了容器内容中，尽管小部件位于标题后面，但您仍然可以看到它。我将更新图像。@Paul这是因为您的元素呈现为透明。在
中添加
背景色：白色
。标题
应该“隐藏”你的widgetGreat！我花了2个小时，终于合并了位置：相对和z索引层工作！！