相対的に配置されたコンテンツは縦に積み重ねられませんか？

Question

私はこれらの要素を積み重ねようとしていますが、これらの要素が互いに重なるように積み重ねようとしています。私は間違って何をしていますか？

HTML：

.content-wrapper { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     height:100%; 
 
     width:100%; 
 
     display: flex; 
 
     align-items: center; 
 
     justify-content: center; 
 
    } 
 
    .content-box { 
 
     background-color: #f2f2f2; 
 
     padding: 5vh 5vw; 
 
     font-family: "Roboto"; 
 
     color: #676767; 
 
     text-align: center; 
 
     max-width: 60vw; 
 
     position: relative; 
 
     z-index:10; 
 
     margin: 1vh 
 
    }

<div class="content-wrapper"> 
 
     <div class="content-box"> 
 
      <span class="title"> Stats </span> 
 
      <br> 
 
      <div class="sep"></div> 
 
      <p> Lorem ipsum 1 </p> 
 
     </div> 
 
    
 
     <div class="content-box"> 
 
      <span class="title"> Stats </span> 
 
      <br> 
 
      <div class="sep"></div> 
 
      <p> Lorem ipsum 2 </p> 
 
     </div> 
 
    </div>

Answer 1

代わりにフレックスボックスを使用してください。 flex direction

.box-list { 
 
    padding: 10px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.box { 
 
    flex: 0 0 auto; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #ccc; 
 
    
 
    margin-bottom: 10px; 
 
}

<section class="box-list"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</section>

Answer 2

ラッパーにflex-direction: column;を追加：「私は、彼らが互いの上に横たわるように、これらの要素をスタックしようとしています

.content-wrapper { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     height:100%; 
 
     width:100%; 
 
     display: flex; 
 
     flex-direction: column; 
 
     align-items: center; 
 
     justify-content: center; 
 
    } 
 
    .content-box { 
 
     background-color: #f2f2f2; 
 
     padding: 5vh 5vw; 
 
     font-family: "Roboto"; 
 
     color: #676767; 
 
     text-align: center; 
 
     max-width: 60vw; 
 
     position: relative; 
 
     z-index:10; 
 
     margin: 1vh 
 
    }

<div class="content-wrapper"> 
 
     <div class="content-box"> 
 
      <span class="title"> Stats </span> 
 
      <br> 
 
      <div class="sep"></div> 
 
      <p> Lorem ipsum 1 </p> 
 
     </div> 
 
    
 
     <div class="content-box"> 
 
      <span class="title"> Stats </span> 
 
      <br> 
 
      <div class="sep"></div> 
 
      <p> Lorem ipsum 2 </p> 
 
     </div> 
 
    </div>