突破溢出：隐藏

Question

我们正在努力试图打破隐藏溢出的div。

我们有一个下拉菜单，在用户输入时会填写建议（在搜索字段中输入＆＃39; c＆＃39;）。这个下拉菜单目前隐藏在菜单栏后面，因为它有＆＃34;溢出隐藏＆＃34;。

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

在此处创建了一个示例：https://edukarma.com/bootstrap/

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

中找到

Answer 1

可能的解决方法是使用以下内容替换overflow:hidden：

.navbar .headerItem.headerSearch {
  display: table; /* like overflow, creates new block formatting context */
  margin-left: 180px;
  padding-right: 15px;
  margin-top: 11px;
}

.navbar .headerItem.headerSearch:after {
  /* hack to make the table use all available width */
  content: '. .';
  /* with such big spacing, the 2nd dot will always wrap to the new line,
     making the table-like block use the width of the container
     instead of shrinking to content */
  word-spacing: 99in;
  /* make this helper invisible */
  display: block;
  height: 0;
  overflow: hidden;
}

Answer 2

我遇到了这个问题，这可能非常令人沮丧。但在阅读this article之后，我发现建议的答案非常令人满意。

基本上，您必须指定外部父项（添加“祖父项”标记）以显式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;
}

工作！ （孩子可以随意漫游）

<强> 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;
}

Answer 3

您可以通过将子项设置为position：absolute。

来完成此操作

HTML

<section>
    Parent
    <div>Child</div>
</section>

CSS

section {
  width: 300px;
  height: 300px;
  background: dodgerblue;
  overflow: hidden; /* BOOM */
}

section div {
  position: absolute; /* BOOM */
  left: 100px;
  width: 100px;
  height: 400px;
  background: gold;
}

演示：http://jsbin.com/nukic/2/edit