html - 如何使用溢出: hidden and make elements overflow on top without using position: absolute?

Question

我正在使用 React，我想使用 react-collapsed 创建一个动画，它会折叠目标组件的上半部分。

所以正确知道它将容器大小减小到 child 大小的一半并应用溢出:隐藏。这会让 child 溢出到底部。有没有办法让它溢出到顶部？

非常感谢您的任何建议。

Answer 1

您可以使用折叠元素的子元素的相对定位。然后将顶部位置设置为 100%。这是指父容器的大小。并翻译child -100% 指的是子元素的大小。

.content {
  position: relative;
  transform: translateY(-100%);
  top: 100%;
}

.collapsed {
  height: 100px;
  overflow: hidden;

  /* just some styling */
  border: 1px solid red;
  max-width: 400px;
  margin: 50px auto;
}

<div class="collapsed">
  <div class="content">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
  </div>
</div>