html - 为什么 margin 不适用于组件，即使是用相对位置定义的组件

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;
    }
}

现在这里发生的是 ma​​rgin-top:1rem 对 q-text 不起作用，即使在定义 position:relative 之后也是如此。那么有什么遗漏吗？

Answer 1

margin-top 正在处理 .q-text，但是您在父级上设置了 margin-top:-4rem。您应该避免 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>