html - 并非每个元素都会溢出

Question

有没有办法让 overflow:hidden 不适用于每个 child ？

小例子:

<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 中才能正常工作。

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

<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>