DropDown Ort in der Spitze des anderen Elements css

Question

Ich habe versucht, eine dropdown setzen, aber hes nicht über andere Elemente. Ich habe versucht, z-index Putting aber immer noch kein Glück. Ich habe die position: 'relative' gemacht, aber das Element wurde gedrückt, wenn ich auf den Dropdown-Button schwebte.

heres die Website 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

hatte ich ein Spiel mit Ihrem Code auf der Website und scheint Ihr Problem ein wenig komplexer ist zu lösen, als Sie denken.

Der Grund, warum Sie dieses Dropdown nicht erhalten, ist, dass Sie einen Überlauf haben: versteckt auf dem Eltern-Div mit Klasse two-col.

Nun, wenn Sie versuchen, und Überlauf hinzu: sichtbar, dass es vermasselt mit der ganzen Struktur DOM wie Sie sehen können:

Die einzige Möglichkeit, dieses Problem zu beheben können, ist Überlauf hinzuzufügen: sichtbar Dein div und schau, wie du die Struktur neu anordnen kannst.

UPDATE:

hatte ich ein anderes Spiel mit ihm mit nur overflow-y:visible hinzufügen. Dieses Mal wird es nicht mit der Benutzeroberfläche verwechselt, sondern fügt dem div eine Bildlaufleiste hinzu. Wenn das in Ordnung ist, können Sie mit diesem fortfahren.

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