javascript - DropDown 放置在其他元素 css 的顶部

Question

我试着放一个 dropdown但他不在其他元素之上。我尝试输入 z-index 但还是没有成功。我设置了 position: 'relative' 但是当鼠标悬停在下拉按钮上时该元素被下推。

这是网站 http://jaysonvelagio.webprodigymedia.com/

<div id="believe-belong">
    <div class="site-width">
        <div class="two-col">
            <div class="two-col-one image">
                <img src="assets/image/dine.jpg" alt="CLICKTREP Dining Privileges" />
            </div><!-- .two-col-one.image -->

            <div class="two-col-two">
                <h3 class="green">Dine</h3>
                <p>Taste your favorite mouthwatering dish for less on restaurants/Café/Bakeshop of your choice all over the Metro. Take advantage of the regular discounts and perks whenever you visit our partners.</p>
                        <div class="dropdown">
                          <button class="dropbtn">partners in dine</button>
                          <div class="dropdown-content">
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                            <a href="#">Link 3</a>
                          </div>
                        </div>  
            </div><!-- .two-col-two -->
        </div><!-- .row.two-col -->

    </div><!-- .site-width -->
</div><!-- #believe-belong -->


<div id="gray-back">
    <div class="site-width">
        <div class="two-col" >  
            <div class="two-col-two">
                <h3 class="green">Shop</h3>
                <p>Instant Discounts anytime from today’s best Shopping stores. <br>Like Toby’s Sport, RUNNR, Ideal Vision and a lot more. </p>
                <a href="clubmembers/blog.php" class="button">Partner Stores</a>    
            </div><!-- .two-col-two -->
            <div class="two-col-one image">
                <img src="assets/image/shop.jpg" alt="CLICKTREP Dining Privileges" />
            </div><!-- .two-col-one.image -->       
        </div><!-- .row.two-col -->

    </div><!-- .site-width -->
</div><!-- #believe-belong -->

Answer 1

我在网站上试了一下你的代码，看来你的问题比你想象的要复杂一些。

你不会得到那个下拉列表的原因是你有 overflow:hidden 在类 two-col 的父 div 上。

现在，如果您尝试添加 overflow:visible，它会扰乱整个 DOM 结构，如您所见:

解决此问题的唯一方法是将 overflow:visible 添加到您的 div 并查看如何重新排列结构。

更新:

我又玩了一次，只添加了 overflow-y:visible。这次它没有弄乱 UI，而是向该 div 添加了一个滚动条。如果没问题，您可以继续进行此操作。

.two-col {
   overflow-x: hidden;
   overflow-y: visible;
   position: relative;
}