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