オーバーレイ固有のdivでどのようにカバーできますか？

Question

私はそのdivの幅と高さが可変である特定のdivをオーバーレイでカバーしたいと思います。どうやってやるの？

参考のためfiddlerです。

.c1 { 
 
    border: 1px solid red; 
 
    padding: 10px; 
 
    margin: 5px; 
 
} 
 

 
.overlay { 
 
    position: relative; 
 
    z-index: 1000; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(255, 255, 255, 0.85);; 
 
    opacity: 1; 
 
}

<p> 
 
    content before 
 
</p> 
 
<div class="c1"> 
 
    <div class="overlay"></div> 
 
    <div class="c2"> 
 
    <h1> 
 
     some content 
 
    </h1> 
 
    <p> 
 
     some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay 
 
    </p> 
 
    <p> 
 
     some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay 
 
    </p> 
 
    </div> 
 
</div> 
 
<p> 
 
    content after 
 
</p>

Answer 1

あなたは、幅と高さが可変であるとき、位置決め親とオーバーレイコンテナでそれを得ることができます。親.c1の位置をrelative、.overlayの位置をabsoluteと設定します。参照のために下のスニペットを確認してください。

.c1 { 
 
    border: 1px solid red; 
 
    padding: 10px; 
 
    margin: 5px; 
 
    position: relative; 
 
} 
 

 
.overlay { 
 
    background-color: rgba(255, 255, 255, 0.85);  
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
}

<p> 
 
    content before 
 
</p> 
 
<div class="c1"> 
 
    <div class="overlay"></div> 
 
    <div class="c2"> 
 
    <h1> 
 
     some content 
 
    </h1> 
 
    <p> 
 
     some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content 
 
     under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay 
 
    </p> 
 
    <p> 
 
     some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay 
 
    </p> 
 
    </div> 
 
</div> 
 
<p> 
 
    content after 
 
</p>