Question

如何设置bootstrap下拉按钮列表的位置和z-index？现在它出现在文本和其他元素的后面。下面给出了HTML。

 <div style="position:relative;">
             <div style="position:absolute;"></div>
             <div class="profile-pic-holder" style="position:absolute;">
                            <div  class="background-fade" >
                                <a href="#" data-toggle="dropdown">
                                    <span>Action Button</span>
                                </a>

                               <ul class="dropdown-menu">
                                      <li><a href="#" >Action1</a></li>
                                      <li><a href="#" >Action2</a></li>
                                      <li><a href="#">Action3</a></li>
                                      <li><a href="#">Action4</a></li>
                                    </ul>

                            </div>
                        </div>

               </div>

下拉列表出现在所有其他div之后。任何人都可以帮忙吗？

jsfiddle

Answer 1

.dropdown-menu {
  position: absolute;
  z-index: 100 or higher till your drop down appears above other elements
}

Answer 2

父div有overflow: hidden;，导致菜单被其父级隐藏。

我建议将图片放在自己的容器中，您可以在其上放置overflow: hidden;。

除此之外，我建议将CSS放在单独的文件中，而不是内联。

我已相应更新了 fiddle 。

Bootstrap下拉按钮位置和z-index

2 个答案: