如何顯示溢出隱藏的父元素

Question

我有如下里面絕對元素：

<div parent-with-overflow-hidden> 
    <div absolute-position></div> 
</div> 

現實語境使用下拉菜單引導

<div overflow-hidden> 
    <div class="dropdown"> 
    <button>Click to show menu</button> 
    <ul class="dropdown-menu">Menu</ul> 
    </div> 
</div> 

，我不能顯示全部的menu 。

如何顯示子div而不將它移到父級之外？

Answer 1

使用position:absolute不會從overflow-hidden中得到它的父母。所以你需要用position:fixed來覆蓋。它將從其擁有的任何父母/祖父母中獲得.dropdown-menu。

那麼你需要設置top的位置取決於父母的height，這是overflow-hidden股利。

之後，你需要動態重新計算top位置，同時滾動頁面，這樣的下拉停留在同一位置

讓我知道，如果它的工作原理;）

看到片段下面或小提琴>jsfiddle

var oHeight = $('.ohidden ').height() 
 
    $('.dropdown-menu').css('top',oHeight) 
 

 
    
 
//dropdown remain `glued` to the button on scroll 
 
    
 
$(window).on("scroll",function(){ 
 
    var wScroll = $(this).scrollTop() 
 
    $('.dropdown-menu').css('top',oHeight-wScroll) 
 

 
})

.ohidden { overflow:hidden} 
 
.dropdown-menu { position:fixed!important;} 
 
body { height:2000px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="ohidden"> 
 
    <div class="dropdown"> 
 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> 
 
    Click to show Menu 
 
</button> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#">ITEM 1</a></li> 
 
    <li><a href="#">ITEM 2</a></li> 
 
    <li><a href="#">ITEM 3</a></li> 
 
    </ul> 
 
</div> 
 
    </div>