Question

有没有办法让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个元素，即使它溢出也会显示。

Answer 1

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

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

＆＃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;

Answer 2

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>

溢出不是每个元素

2 个答案: