I am trying to build a simple page where I was wondering how do I make the circle with the paragraph comes on top of the rectangle so that the rectangle and the text will appear in the front(on the top)? thank you so much for your help,
.dot {
height: 200px;
width: 200px;
background-color: lightgrey;
border-radius: 50%;
display: inline-block;
margin-bottom: -5rem;
}
.rectangle {
height: 200px;
width: 850px;
background-color: #555;
}
.rectangle-vertical-1 {
height: 180px;
width: 120px;
background-color: lightgrey;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-2 {
height: 180px;
width: 120px;
background-color: #a3a3a3;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-3 {
height: 180px;
width: 120px;
background-color: #4d4c4c;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-container {
position: relative;
margin-top: -9rem;
"}<div class="container"><div style="position: relative;"><div style="text-align:center"><div class="dot"><h4>Melrose</h4><p>abc</p></div><div><div style="text-align:center"><div class="rectangle"><img class="img" src="https://pic4.zhimg.com/v2-34c6587aa75dd33470cf5f4dddcb6923_1200x500.jpg" alt=""> </div><div class="rectangle-vertical-container"><span class="rectangle-vertical-1"></span></div></div></div></div>