如何显示溢出隐藏的父元素

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>