box1
box2
<div class="test"> <div class="test12">z-index: 1.2</div> <div class="test11">z-index: 1.1</div> </div> <div class="content"> <div class="box1">box1</div> <div class="box2">box2</div> </div>
.test { position: relative; width: 100px; height: 100px; margin-bottom: 10px; background: #EEE; } .test11, .test12 { position: absolute; width: 80px; height: 80px; } .test11 { top: 0; left: 0; background: red; z-index: 1.1; } .test12 { right: 0; bottom: 0; background: blue; z-index: 1.2; } .content { display: flex; width: 100px; height: 100px; background: #EEE; } .box1, .box2 { width: 50px; height: 50px; } .box1 { background: orange; order: 1.2; } .box2 { background: green; order: 1.1; }