Что все варианты с css для перекрытия divs, без использования абсолютной позиции?

Question

Вот моя попытка на то, что я пытаюсь решить, но все ответы мы:

https://jsfiddle.net/L2qukchc/

это просто делает это:

.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, но хочу иметь несколько уровней [как это достигается через позицию: абсолютный и z-индекс]. Причина, по которой у меня возникают проблемы с абсолютом, заключается в том, что слои относительно друг друга, поэтому писать много точек останова для решения этого вопроса не является идеальным.

Общий вопрос: «Что все варианты с помощью CSS, чтобы перекрываться дивами», относится к, могу ли я расположить элементы относительно но предотвращая мой Flexbox диву от создания пространства для новых элементов, которые я хочу, чтобы добавить [ a la, слои]. Благодаря!

Edit: Предложение дано использовать относительное расположение хорошо работает:

https://jsfiddle.net/vdv09549/

интересно, есть ли другие?

Answer 1

В упомянутой отрицательной марже не подходит для этого (см образец 3), я могу только думать, 2, position: relative в комбо с top/left и 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; 
 
}

<div class="parent nr1"> 
 
    <div class="child">Sample 1 
 
    </div> 
 
    <div class="child nr2"> 
 
    </div> 
 
</div> 
 

 
<div class="parent nr2"> 
 
    <div class="child">Sample 2 
 
    </div> 
 
    <div class="child nr2"> 
 
    </div> 
 
</div> 
 

 
<div class="parent nr3"> 
 
    <div class="child">Sample 3 
 
    </div> 
 
    <div class="child nr2"> 
 
    </div> 
 
</div>