Bootstrap Button Dropdown, скрытый за div

Question

Я просто не могу найти решение моей проблемы. Мое меню .dropdown скрыто за моим .media div. Я пробовал все: от относительного/абсолютного до z-индекса, но я не работаю ни в одном из этих случаев. Может быть, вы можете мне помочь. Большое спасибо!

<div class="btn-group " > 
    <button type="text" class="btn " style="background-color: #22CAFF">Sortieren nach</button> 
    <button type="button" class="btn dropdown-toggle" style="background-color: #22CAFF" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    <span class="caret"></span> 
    <span class="sr-only">Toggle Dropdown</span> 
    </button> 
    <ul class="dropdown-menu " style="position: fixed; z-index: 10000;"> 
    <?php echo get_options(); ?> 
    </ul> 
</div> 
<div class='media' id='Erg_Praxis' style='overflow:visible;'> 
    <div class='media-left media-middle'> 
    <a href='SuchePraxis.php?id=$Id'> 
     <img class='media-object' src='../upload/$Bild' alt='Bild $Praxisname'> </a> 
    </div> 
    <div class='media-body'> 
    <h4 class='media-heading'> </h4>                    
    </div> 
</div> 

Answer 1

Поскольку ваш выпадающий не работает с помощью прилагаемого кода я добавил один общий и прокомментировал ваш, как вы можете увидеть выпадающие дисплеи над изображением:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
    Dropdown 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
    <li><a href="#">Action</a></li> 
 
    <li><a href="#">Another action</a></li> 
 
    <li><a href="#">Something else here</a></li> 
 
    <li role="separator" class="divider"></li> 
 
    <li><a href="#">Separated link</a></li> 
 
    </ul> 
 
</div> 
 

 
<!-- <div class="btn-group"> 
 
    <button type="text" class="btn" style="background-color: #22CAFF">Sortieren nach</button> 
 
    <button type="button" class="btn dropdown-toggle" style="background-color: #22CAFF;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
    <span class="caret"></span> 
 
    <span class="sr-only">Toggle Dropdown</span> 
 
    </button> 
 
    <ul class="dropdown-menu" style="position: fixed; z-index: 10000;"> 
 
    <?php echo get_options(); ?> 
 
    </ul> 
 
</div> --> 
 
<div class='media' id='Erg_Praxis' style='overflow:visible;'> 
 
    <div class='media-left media-middle'> 
 
    <a href='SuchePraxis.php?id=$Id'> 
 
     <img class='media-object' src='../upload/$Bild' alt='Bild $Praxisname'></a> 
 
    </div> 
 
    <div class='media-body'> 
 
    <h4 class='media-heading'> </h4> 
 
    </div> 
 
</div>