Bootstrap and Z-Index

Question

I'm having an issue with z-index attribute that I have included within a div that has a Pinterest Widget.

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.

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 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.

My Test Site

Any suggestion regarding this z-index would be appreciated.

Answer 1

Even though you have a z-index style applied to .headline, be sure to also include an appropriate position rule. z-index will only apply to elements with a position rule other than the default

source

Since your element is rendered as transparent, if you wish to "hide" part of this widget, setting a background-color will satisfy this

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

Answer 2

1.)

Assure your declaring a position with z-index; in your case, position: relative; is most optimal.

2.)

Make sure your declaring z-index: higher then that of which is pulled in by pintrest API / iframe.

3.)

Make sure you even need z-index; try just adding position: relative; to your element in Q.

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

4.)

If nothing else works.. you can force it there with position: absolute; and z-index; (though not recommended)

Answer 3

Z-index only effects elements that have a position value other than "static" (the default).