Comment puis-je couvrir avec div spécifique de superposition?

Question

Je voudrais couvrir avec superposer un div spécifique où la largeur et la hauteur de ce div est variable. Comment puis je faire ça?

Voici le fiddler pour référence.

.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

Vous pouvez l'obtenir avec les parents de positionnement et le récipient de recouvrement, lorsque la largeur et la hauteur est variable. Définissez la position parent .c1 comme relative et la position .overlay comme absolute. Consultez l'extrait ci-dessous pour référence.

.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>