Bootstrap和Z-Index

Question

我有一個z-index屬性的問題，我已經包含在具有Pinterest Widget的div中。

在之前的一個不是Bootstrap的應用程序中，我能夠簡單地設置z-index：2，這有助於隱藏標題后面的Widget的一部分。

這里我將標題div和父列div設置為z-index：1 Widget 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>

我也試過放置溢出：隱藏在小部件div中，但我似乎無法讓它工作。

我的測試網站

任何關於這個z指數的建議都將受到贊賞。

Answer 1

即使您將z-index樣式應用於.headline ，也要確保包含適當的position規則。 z-index僅適用於position規則不是默認值的元素

資源

由於您的元素呈現為透明，如果您希望“隱藏”此小部件的一部分，設置background-color將滿足此要求

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

Answer 2

Z-index僅影響位置值不是“靜態”（默認值）的元素。

Answer 3

1.）

保證你用z-index;聲明一個位置z-index; 在你的情況下， position: relative; 是最優的。

2.）

確保你的聲明z-index:高於pintrest API / iframe引入的z-index: 。

3.）

確保你甚至需要z-index; 嘗試添加position: relative; 你的元素在Q.

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

4）

如果沒有其他工作..你可以用position: absolute;強制它position: absolute; 和z-index; （雖然不推薦）

Answer 4

在我的特殊情況下，絕對定位起到了作用。 相對定位推低了其他自助元素。

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