时间戳

首页 > 解决方案 > 如何使用溢出：隐藏并使元素在顶部溢出而不使用位置：绝对？

html - 如何使用溢出：隐藏并使元素在顶部溢出而不使用位置：绝对？

问题描述

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

所以正确知道它将容器大小减小到孩子大小的一半并适用overflow: hidden。这将使孩子在底部溢出。有没有办法让它在顶部溢出？

非常感谢您的任何建议。

标签： htmlcssreactjsweb

解决方案

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

推荐阅读