jquery - 同位素 z-index 下拉覆盖元素

Question

感谢您的阅读.. 正如您从图片中看到的那样，我使用下拉菜单来显示共享按钮。但是由于 z-index 问题，包含按钮的 div 保留在 .media div 下。我试图更改下拉菜单的 z-index，但它已经设置得更高。按钮需要覆盖一切。但是我尝试过的每一次都没有改变..我使用isotope和 Twitter bootsrap。

我试过这段代码，但没有成功。

$container.isotope({
  layoutMode: 'fitRows',
    onLayout: function($elems, instance) {
      // Add exponential z-index for dropdown cropping
      $elems.each(function(e){
      $(this).css({ zIndex: ($elems.length - e) });
    });
  }
});

这是我的 css 代码..你可以看到操作 from here

/* 开始:推荐的同位素样式 */

            /**** Isotope Filtering ****/

            .isotope-item {
              z-index: 2;
            }

            .isotope-hidden.isotope-item {
              pointer-events: none;
              z-index: 1;
            }

            /**** Isotope CSS3 transitions ****/

            .isotope,
            .isotope .isotope-item {
              -webkit-transition-duration: 0.8s;
                 -moz-transition-duration: 0.8s;
                  -ms-transition-duration: 0.8s;
                   -o-transition-duration: 0.8s;
                      transition-duration: 0.8s;
            }

            .isotope {
              -webkit-transition-property: height, width;
                 -moz-transition-property: height, width;
                  -ms-transition-property: height, width;
                   -o-transition-property: height, width;
                      transition-property: height, width;
            }

            .isotope .isotope-item {
              -webkit-transition-property: -webkit-transform, opacity;
                 -moz-transition-property:    -moz-transform, opacity;
                  -ms-transition-property:     -ms-transform, opacity;
                   -o-transition-property:      -o-transform, opacity;
                      transition-property:         transform, opacity;
            }

            /**** disabling Isotope CSS3 transitions ****/

            .isotope.no-transition,
            .isotope.no-transition .isotope-item,
            .isotope .isotope-item.no-transition {
              -webkit-transition-duration: 0s;
                 -moz-transition-duration: 0s;
                  -ms-transition-duration: 0s;
                   -o-transition-duration: 0s;
                      transition-duration: 0s;
            }

            /* End: Recommended Isotope styles */



            /* disable CSS transitions for containers with infinite scrolling*/
            .isotope.infinite-scrolling {
              -webkit-transition: none;
                 -moz-transition: none;
                  -ms-transition: none;
                   -o-transition: none;
                      transition: none;
            }

            .media{
              width: 300px;
              margin: 5px;
              padding: 5px;
              float: left;
              position: relative;
              background: #f5f5f5;
              border: 1px #e3e3e3 solid;
              border-left: 2px #e3e3e3 solid;
            }

            .userdateblock{
              margin-top:5px;
              border-top: 1px #e3e3e3 solid;
              overflow: hidden;
            }

            .nav-pills li a{
              margin:0px;
              padding:0 0 0 5px;
              font-size: 12px; 
            }

            .thumbnails li {
              margin-bottom:0px;
            }

            .media iframe{
              max-width: 290px;
              max-height: 250px;
            }

            .index-php {
              min-width:60px;
                position: absolute;
            }

            .index-php li{
              padding: 5px;
            }

和html

 <div class="media">
    <img src="#" />
    <div class="media-body">
      <pTitle</p>
    </div>
    <div class="btn-group">
      <div class="btn-group dropup">
        <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="icon-bullhorn"></i> 
        </a>
        <ul class="dropdown-menu index-php">
          <li>
            <div class="fb-like" data-href="http://www.buyuyenicerik.com/oku/kurtlerin-iranda-ki-protestolari/1354" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>
          </li>
          <li>
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.buyuyenicerik.com/oku/kurtlerin-iranda-ki-protestolari/1354" data-via="buyuyenicerik" data-lang="tr" data-related="buyuyenicerik" data-hashtags="icerik">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
          </li>
          <li>
            <div class="g-plus" data-action="share" data-height="15"></div>
          </li>
          <li>
            <a href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
          </li> 
        </ul>
      </div>   
  </div>

---

Answer 1

尝试在 isotope-item 上设置 overflow:visible..

.isotope-item {
  z-index: 2;
  overflow:visible;
}