我如何使用覆蓋特定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>