时间戳

首页 > 解决方案 > 如何使内容与css垂直堆叠

javascript - 如何使内容与css垂直堆叠

问题描述

可能有人知道这个游戏

在此处输入图像描述

我想将每张卡片堆叠在一列中，这里是我的小提琴jsfiddle。

在我的情况下，我有一张卡片包裹在div最大高度中，那么如果卡片超出范围，则卡片不会折叠（隐藏）但它应该堆叠在顶部

这发生在我的代码中 在此处输入图像描述

我想做这样，每张卡片都叠起来 在此处输入图像描述

HTML

<div class="wrapper">
  <div class="card card-1">
    <h4 class="header-title">
      Lorem Ipsum
    </h4>
    <div class="card-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>
  
  <div class="card card-2">
    <h4 class="header-title">
      Lorem Ipsum
    </h4>
    <div class="card-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>
  
  <div class="card card-3">
    <h4 class="header-title">
      Lorem Ipsum
    </h4>
    <div class="card-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>
</div>

CSS

.wrapper{
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  overflow: hidden;
}
.card{
  padding: 0.4em 1rem;
  width: 250px;
  border-radius: 5px;
  margin: 0.5rem;
}
.card.card-1{
  background: salmon;
  border: 2px solid red;
}
.card.card-2{
  background: royalblue;
  border: 2px solid blue;
}
.card.card-3{
  background: greenyellow;
  border: 2px solid limegreen;
}

那么，我该怎么做才能实现呢？

标签： javascripthtmlcssbootstrap-4

解决方案

您是否尝试过使用该z-index物业？它用于指定元素的堆栈顺序。

例如 ：

.wrapper{
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  overflow: hidden;
}
.card{
  padding: 0.4em 1rem;
  width: 250px;
  border-radius: 5px;
  margin: 0.5rem;
}
.card.card-1{
  background: salmon;
  border: 2px solid red;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -3;
}
.card.card-2{
  background: royalblue;
  border: 2px solid blue;
  position: absolute;
  left: 0px;
  top: 15px;
  z-index: -2;
}
.card.card-3{
  background: greenyellow;
  border: 2px solid limegreen;
  position: absolute;
  left: 0px;
  top: 30px;
  z-index: -1;
}
<div class="wrapper">
  <div class="card card-1">
    <h4 class="header-title">
      Lorem Ipsum
    </h4>
    <div class="card-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>
  
  <div class="card card-2">
    <h4 class="header-title">
      Lorem Ipsum
    </h4>
    <div class="card-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>
  
  <div class="card card-3">
    <h4 class="header-title">
      Lorem Ipsum
    </h4>
    <div class="card-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>
</div>

推荐阅读