如何将div堆叠在一起？绝对位置不起作用

Question

不幸的是，我正在使用 flexbox 创建网格，我对如何使 div 堆叠在一起有点困惑。这就是当我隐藏溢出：自动并添加相对于 carddiv 的位置时的样子。我相信 div 堆叠在顶部，但它们看起来不正确。

这就是它的样子：

图片链接 https://imgur.com/a/1KsJDh7

我希望它看起来像这样：

除了 positon:absolute 使一切都消失。 我是 css/html 的新手，所以我不确定我做错了什么。

https://imgur.com/a/mrLsTdX

App.css

* {
    /*overflow:auto*/
}

.App {
  /*display: flex;*/
  /*flex-wrap: wrap;*/
}

卡片.css

.container{
    background-color: yellow;
    display: flex;
    flex-flow: column;
    text-align: center;
    position: relative;
    margin: 10% 10% 10%;
}

.cardDiv {
    height: 100vh;
    position: absolute;
}

.cardPicture {
    background-color: blue;
    height: 50vh;
}

.cardDescription {
    background-color: green;
    height: 50vh;
}

但是，如果没有 position:absolute，它看起来像这样，这就是我希望它看起来的样子，只是它不会堆叠。我假设第一个版本是堆叠的，这就是为什么它只显示一个 div？

以下代码用于第二个图片链接： https://imgur.com/a/mrLsTdX

App.css

* {
    overflow:auto
}

.App {
  /*display: flex;*/
  /*flex-wrap: wrap;*/
}

卡片.css

.container{
    background-color: yellow;
    display: flex;
    flex-flow: column;
    text-align: center;
    position: relative;
    margin: 10% 10% 10%;
}

.cardDiv {
    height: 100vh;
}

.cardPicture {
    background-color: blue;
    height: 50vh;
}

.cardDescription {
    background-color: green;
    height: 50vh;
}

cardDiv 是通过插入 div 的 map 函数生成的。

html 看起来像这样：

<div className='container'>
   <div className="cardDiv">
      <div className="cardPicture"></div>
      <div className="cardDescription"></div>
   </div>
</div>

有没有人知道我可以做些什么让 div 堆叠起来而不消失？

Answer 1

我认为问题在于弹性容器和已设置为绝对定位的弹性项目的组合。当您在.cardDiv 上设置position: absolute 时，它会将所有cardDiv 元素从flex 流中取出，并且没有任何宽度或内容，cardDiv 就会消失。作为一个实验，使用你的第一个 CSS 块并为.cardDiv 添加一个宽度（比如 50 像素）。您应该会看到卡片重新出现、堆叠并在水平方向占据 50 像素。

当您将元素设置为display: flex 或display: inline-flex 时，该元素的所有直接子元素都将成为弹性项目。您可以看到all the things that does to the children by default here，并且各种 flex 属性的目的是控制子项将如何沿您指定的轴显示。但是，如果您将这些弹性项目之一设置为绝对定位，it takes that element out of that flex configuration。

如果我正确理解您想要什么，我不确定您是否需要容器是 flex 的。尝试从容器中取出 flex 属性，将 cardDivs 设置为 position:absolute 并设置宽度和高度以符合您想要填充的屏幕大小。

.container {
    position: relative;
    margin: 1rem;
}

.cardDiv {
    position: absolute;
    width: 100%;
    height: 100vh;
}

.cardPicture {
    background-color: blue;
    height: 50%;
}

.cardDescription {
    background-color: green;
    height: 50%;
}

如果这不是您想要的，请告诉我 - 我认为您可以将其调整为您希望卡片的显示方式。但这就是它们在图片和描述之间堆叠并拆分为 50-50。