Question

因此，不幸的是，我正在使用flexbox创建网格，我对如何使div彼此堆叠感到有些困惑。这是当我隐藏overflow：auto并添加相对于carddiv的位置时的样子。我相信div叠在顶部，但是它们看起来不正确。

这是它的样子：

我希望它看起来像这样：

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

App.css

* {
    /*overflow:auto*/
}

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

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

但是，没有位置：绝对看起来像这样，这是我希望它看起来像的样子，只是它没有堆叠。我认为第一个版本是堆叠的，这就是为什么它只显示一个div的原因？

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

App.css

* {
    overflow:auto
}

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

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

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

html看起来像这样：

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

有人对我能做什么使div堆积而不会消失有任何想法吗？

Answer 1

我认为问题是flex容器和已设置为绝对定位的flex项的组合。当您在position: absolute上设置.cardDiv时，所有cardDiv元素将从弹性流中移出，并且没有任何宽度或内容，cardDiv消失了。作为实验，以您的第一个CSS块为.cardDiv添加一个宽度（例如50px）。您应该看到卡片重新出现，堆叠并在水平方向上占据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属性，将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。

如何将div彼此堆叠？绝对排名无效

1 个答案: