Не задается z-index
.
block {
height: 440px;
width: 270px;
display: inline-block;
border: 1px solid #000000;
box-shadow: 0px 0px 4px 1px #000000;
margin-bottom: 40px;
padding: 40px 10px 0px 10px;
position: relative;
}
/* .block::after{
content: "";
height: 150px;
width: 100%;
background-color: #016abb;
position: absolute;
top: 0;
margin: 0px -10px -10px -10px;
} */
.foto-redonda {
border-radius: 50%;
}
.block::before {
content: "";
height: 150px;
width: 100%;
background-color: #016abb;
position: absolute;
top: 0;
margin: 0px -10px -10px -10px;
}
.foto {
z-index: 5;
}
<div class="block">
<div class="foto">
<img class="foto-redonda" src="http://via.placeholder.com/250x250/33ff99/555555?text=Foto" alt="Foto participante">
</div>
<div class="text">
<h3>un señor cualquiera</h3>
</div>
<div class="text2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur tellus vel sapien porta, eget bibendum libero viverra. Nullam turpis libero, viverra non lectus et, elementum mattis turpis. Sed laoreet, orci sed dignissim suscipit, orci sem
ultrices turpis, interdum mollis nunc augue congue purus. Praesent a facilisis enim. Proin ultricies aliquet sem at suscipit. Nam mollis ipsum nec porttitor luctus. Sed non ex vitae odio vehicula efficitur eget at sapien. Curabitur nec pretium mauris.</p>
</div>
</div>
position: absolute; position: fixed; position: relative;