有没有办法使用flexbox语法将div叠加在一起？

Question

Flexbox问题.希望有人可以帮助:)

我正在尝试构建一组由div组成的卡片,并将它们叠加在一起,就像使用position:absolute一样.

有没有办法让div使用flexbox在同一个空间中相互叠加？

Answer 1

获得它的一种方法是设置负余量.使用它的一副牌:

.deck {
    display: flex;
    height: 200px;
    flex-direction: column;
}

.card {
    height: 100px;
    width: 60px;
    flex: 100px 1 0;
    border: solid 1px black;
    border-radius: 5px;
    margin-bottom: -80px;
    background-color: white;
    box-shadow: 3px 3px 3px gray;
}

<div class="deck">
<div class="card">1</div>    
<div class="card">2</div>    
<div class="card">3</div>    
<div class="card">4</div>    
<div class="card">5</div>    
</div>

Answer 2

我需要您提供一些代码和更多信息，但我认为这是可能的。

如果你想以单人纸牌的方式进行：

只需将溢出隐藏添加到顶部的卡片上max-height即可20px。

最后一个应该没有max-height和overflow:auto。

然而，您正在做的事情可能在没有弹性盒的情况下更容易完成。Flexbox 也可以一起使用position:abosolute。它们是不同的属性。举一些你想要实现的目标的例子，也许我能提供帮助。