Question

以下是我尝试解决的问题，但所有答案都是我们：

它只是这样做：

  .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 }

.box-front {
    display: flex;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px rgba(57,70,78,1.2);
}

.box-back {
    display: flex;
    z-index: -1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px rgba(57,70,78,1.2);
    margin-top: -10px;
}

但我使用负边距（嘘！）。

我正在使用flexbox，但我希望有多个层[通过position：absolute和z-index获得]。我遇到绝对问题的原因是这些层是相对的，所以编写很多断点来解决这个问题并不理想。

一般问题，“css重叠div的所有选项是什么”，指的是我是否可以将元素置于相对但是阻止我的flexbox div为新元素腾出空间我想要添加[a la，layers]。谢谢！

编辑：给出使用相对布局的建议很有效：

https://jsfiddle.net/vdv09549/

想知道是否还有其他人？

Answer 1

由于上面提到的负边距不适合这个（参见示例3），我只能想到2，position: relative与top / left和{{1}组合我会说后者在大多数情况下可能是推荐的。

transform: translate

.parent {
  display: flex;
  height: 100px;
}
.parent ~ .parent {
  margin-top: 30px;
}
.child {
  flex: 1;
  border: 1px dashed #000;
}

.parent.nr1 .child.nr2 {
  position: relative;
  left: -20px;
  top: 20px;
}
.parent.nr2 .child.nr2 {
  transform: translate(-20px,20px);
}
.parent.nr3 .child.nr2 {
  margin-left: -20px;
  margin-top: 20px;
}

使用css重叠div的所有选项是什么，而不使用绝对位置？

1 个答案: