如何在溢出隐藏父元素中显示绝对元素

How to show absolute element inside the overflow hidden parent element

本文关键字：元素 显示 溢出 隐藏      更新时间：2023-09-26

结果如下:

<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而不将其移出父div ?

使用position:absolute不会将其从overflow-hidden中取出。所以你需要用position:fixed覆盖它。它将从它拥有的任何父/祖父母中获取.dropdown-menu。

那么你需要设置top的位置取决于父元素的height，也就是overflow-hiddendiv。

之后，你需要动态地重新计算top的位置，同时滚动页面，使下拉菜单保持在相同的位置

让我知道它是否有效;)

参见下面的代码片段或fiddle> 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>

相关文章：