溢出不是每个元素

时间:2016-08-15 13:41:36

标签: html css

有没有办法让overflow:hidden不适用于每个孩子?

小例子:

<div class="parent" style="overflow:hidden; position: relative;">
   ...
   <div class="hidden" style="top: -50px"> AA </div> <!-- overflowed and hidden -->
   <div class="visible" style="bottom: -50px"> BB </div> <!-- overflowed and visible -->
   ... 
</div>

我需要有1个元素,即使它溢出也会显示。

2 个答案:

答案 0 :(得分:4)

如果您的可见元素可以是position: absolute,则会忽略其父级的overflow: hidden。这是一个代码段示例。

请注意您的父母应该包含在position: relative的另一个div中,以便正常工作。

&#13;
&#13;
.visible{
  position: absolute;
}
.parent{
  overflow: hidden;
}
.relative{
  position: relative;
}

/* presentational styles */
.parent{
  border: 1px solid blue;
}
.hidden{
  background: yellow;
}
.visible{
  background: red;
}
.parent,
.hidden,
.visible{
  padding: 2rem;
}
&#13;
<div class="relative">
  <div class="parent">
     <div class="hidden" style="top: -50px"> AA </div> <!-- overflowed and hidden -->
     <div class="visible" style="bottom: -50px"> BB </div> <!-- overflowed and visible -->
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

CSS:

.hidden-flow {
    overflow: hidden;
}

HTML:

<div class="parent hidden-flow" style=" position: relative;">
   ...
   <div class="hidden hidden-flow" style="top: -50px"> AA </div> <!-- overflowed and hidden -->
   <div class="visible" style="bottom: -50px"> BB </div> <!-- overflowed and visible -->
   ... 
</div>