为什么基于绝对父对象而不是直接相对父对象应用对象边距

Question

标题有点难=>

我有以下代码

==>问题<== https://codepen.io/anon/pen/WVpEGQ?editors=1100

==>确定<== https://codepen.io/crocsx-the-styleful/pen/EqWvRR

基本上，我希望subcontent-header中包含的元素上的margin / padding等相对应用于subcontent-header div 该div的位置是：相对，但是它应用在div之外，并且将我的subcontent-header向下推了

/* -- MAIN -- */
    body, html {
        background: @body-background-color url(/assets/images/bg.jpg) no-repeat center 0;
        background-size: contain;
        color:@body-color;
        font-size: 0.9rem;
        height: 100%;
        max-height: 100%;
        font-family: 'Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
        // font-family: @font-name !important;
        margin:0;
        padding:0;
        position:relative;
    	  overflow: auto;
    }
    
    .header {
        position: relative;
        background:green;
        width: 100%;
        height: 40px;
    }
    
    .content {
        width: 100%;
        min-height: calc(100% - 60px) !important;
        position: relative;
        display: flex;
        flex-direction: column;
      background: red;
    }
    
    .footer{
        width: 100%;
        height: 20px;
        position: relative;
        background: blue;
    }
    
    .subcontent{
      position:absolute;
      width: 100%;
      height: 100%;
      background:rgba(155,155,155,0.5)
    }
    
    .subcontent-header{
      position: relative;
      width: 100%;
      height: 30%;
      background:rgba(155,0,0,0.5)
    }
    
    .subcontent-content{
       position: relative;
      width: 100%;
      height: 70%;
      background:rgba(0,0,155,0.5) 
    }

<div class="header"></div>
    <div class="content">
      <div class="subcontent">
        <div class="subcontent-header">
          <h1>title</h1>
        </div>
        <div class="subcontent-content"></div>
      </div>
    </div>
    <div class="footer">
 </div>

Answer 1

原因是因为您没有将h1的位置设置为绝对。

尝试将其添加到CSS

.subcontent-header h1 {
  position: absolute;
}

下面的示例工作代码

/* -- MAIN -- */
    body, html {
        background: @body-background-color url(/assets/images/bg.jpg) no-repeat center 0;
        background-size: contain;
        color:@body-color;
        font-size: 0.9rem;
        height: 100%;
        max-height: 100%;
        font-family: 'Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
        // font-family: @font-name !important;
        margin:0;
        padding:0;
        position:relative;
    	  overflow: auto;
    }
    
    .header {
        position: relative;
        background:green;
        width: 100%;
        height: 40px;
    }
    
    .content {
        width: 100%;
        min-height: calc(100% - 60px) !important;
        position: relative;
        display: flex;
        flex-direction: column;
      background: red;
    }
    
    .footer{
        width: 100%;
        height: 20px;
        position: relative;
        background: blue;
    }
    
    .subcontent{
      position:absolute;
      width: 100%;
      height: 100%;
      background:rgba(155,155,155,0.5)
    }
    
    .subcontent-header{
      position: relative;
      width: 100%;
      height: 30%;
      background:rgba(155,0,0,0.5)
    }
    
    .subcontent-header h1 {
      position: absolute;
    }
    
    .subcontent-content{
       position: relative;
      width: 100%;
      height: 70%;
      background:rgba(0,0,155,0.5) 
    }

<div class="header"></div>
    <div class="content">
      <div class="subcontent">
        <div class="subcontent-header">
          <h1>title</h1>
        </div>
        <div class="subcontent-content"></div>
      </div>
    </div>
    <div class="footer">
 </div>