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

Question

标题有点难=>

我有以下代码

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

==> 好的 <== https://codepen.io/crocsx-the-styleful/pen/EqWvRR

基本上，我希望包含的元素上的边距/填充等subcontent-header相对地应用于subcontent-headerdiv 这个 div 有一个 position:relative，但它应用在 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>

标签： htmlcss

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>