css - 溢出溢出:hidden

Question

我们目前正在努力尝试突破隐藏了溢出的 div。

我们有一个下拉菜单，当用户输入(在搜索字段中输入“c”以查看)时，该菜单会充满建议。这个下拉菜单目前隐藏在菜单栏后面，因为它有“溢出隐藏”。

如果我们删除 top:100% 并将位置设置为 fixed，我们就可以突破。但我们希望它保持绝对(即对于移动设备)。

在这里创建了一个例子:https://edukarma.com/bootstrap/

下拉建议列表可以在 .headerItem.headerSearch .searchField .twitter-typeahead .tt-dropdown-menu 中找到。

Answer 1

我遇到了这个问题，这让人非常沮丧。然而看完this article ，我发现建议的答案非常令人满意。

本质上，您必须指定外层父级(添加“祖 parent ”标签)显式position:relative;(未指定溢出)和直接父级overflow:hidden ; 而不是将这两个 CSS 选项直接应用于同一个直接父级。

所提供的示例(为了完整性，以防 2012 年的文章丢失):

不工作

HTML

<div class="parent">
  <div class="child"></div>
</div>

CSS

.parent {
  position:relative;
  overflow:hidden;
}
.child {
  position:absolute; 
  top:-10px; 
  left:-5px;
}

工作! ( child 可以自由漫游到任何地方)

HTML

<div class="grand-parent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

CSS

.grand-parent {
  position:relative;
}
.parent {
  overflow:hidden;
}
.child {
  position:absolute; 
  top:-10px; 
  left:-5px;
}