リサイズ時にDivsが重なり合うようにする

Question

ウィンドウのサイズを変更したときに2つのdivが重なり合うようにするにはどうすればよいですか？

基本的に1つのdivを前面に、もう1つを背面に置き、ウィンドウのサイズを変更するときに重なり合うようにします。

http://codepen.io/anon/pen/mWMpKg

.flex { 
 
    display: flex; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    height: 100%; 
 
    justify-content: center; 
 
} 
 

 
.flex1 { 
 
    min-width: 500px; 
 
    height: 538px; 
 
    background: black; 
 
    z-index: 10; 
 
    transform: translateX(40px); 
 
    margin-left: 5%; 
 
} 
 

 
.flex2 { 
 
    min-width: 500px; 
 
    height: 538px; 
 
    background: grey; 
 
    ; 
 
    z-index: 0; 
 
    transform: translateY(40px) translateX(-50px); 
 
    margin-right: 5%; 
 
}

<section class="flex"> 
 
    <div class="flex1"> 
 
    </div> 
 
    <div class="flex2"> 
 
    </div> 
 
</section>

Answer 1

.flex { 
 
    display: flex; 
 
    position: relative; 
 
} 
 

 
.flex1 { 
 
    position: absolute; 
 
    left: 10%; 
 
    min-width: 500px; 
 
    height: 538px; 
 
    background: black; 
 
    z-index: 10; 
 
} 
 

 
.flex2 { 
 
    position: absolute; 
 
    right: 10%; 
 
    transform: translateY(40px); 
 
    min-width: 500px; 
 
    height: 538px; 
 
    background: grey; 
 
    z-index: 0; 
 
}

<section class="flex"> 
 
    <div class="flex1"></div> 
 
    <div class="flex2"></div> 
 
</section>

：

は、私は、この例のような何かを達成したいです