I've created a cloud using HTML/CSS and I'm struggling to position some text in the center of it. Unfortunately, I can't get it to overlap the cloud divs properly.
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
.text {
overflow: hidden;
position: absolute;
z-index: -2;
}<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c">
<p class="text">
this is some unique text
</p>
</div>
<div id="left_c">
</div>
</div>I'm not sure how to resolve this issue, as setting the z-index doesn't seem to be working as expected. Do I need to place the p tags inside another div? Any help or suggestions would be greatly appreciated!