マージンがコンポーネントでは動作しない理由も、相対位置で定義された

Question

下図のように私のコードは次のとおりです。

xyz.html

<div class='main-container'> 
    <div class="q-background"> 
    </div> 
    <div class="q-text"> 
     <div>Order History</div> 
    </div> 

    <div class ="q-orders"> 
    </div> 
</div> 

xyz.scss

.main-container { 
    height: 100vh; 
    width: 100vw; 
    margin-top: -4rem; 
    .q-background { 
     float: left; 
     width: 100%; 
     height: 14.3vw; 
     background: url("../../image/i-header-list.jpg") no-repeat; 
     background-size: contain; 
    } 
    .q-text { 
     position: relative; 
     margin-top: 1rem; 
     font-size: 2rem; 
     text-align: center; 
    } 
    .q-orders { 
     position: relative; 
     margin-left: 2rem; 
     float: left; 
     height: 50%; 
     width: 50%; 
     background-color: #ff3; 
    } 
} 

今ここに何が起こりますかposition：relativeを定義した後であってもmargin-top：1remはq-textでは機能しません。それで何か不足していますか？

Answer 1

margin-topは.q-textに取り組んでいますが、親には​​を設定しました。 marginに負の値を指定しないでください。

.main-container { 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
.main-container .q-background { 
 
    float: left; 
 
    width: 100%; 
 
    height: 14.3vw; 
 
    background: url("../../image/i-header-list.jpg") no-repeat; 
 
    background-size: contain; 
 
} 
 
.main-container .q-text { 
 
    position: relative; 
 
    margin-top: 1rem; 
 
    font-size: 2rem; 
 
    text-align: center; 
 
    top:0; 
 
} 
 
.main-container .q-orders { 
 
    position: relative; 
 
    margin-left: 2rem; 
 
    float: left; 
 
    height: 50%; 
 
    width: 50%; 
 
    background-color: #ff3; 
 
}

<div class='main-container'> 
 
    <div class="q-background"> 
 
    </div> 
 
    <div class="q-text"> 
 
     <div>Order History</div> 
 
    </div> 
 

 
    <div class ="q-orders"> 
 
    </div> 
 
</div>