How to stack different divs on each other (should be responsive)

Question

I have just started to deal with HTML and CSS. I would like to stack different divs (see picture).

The black div represents the container. The red div a header and the blue one a circle which is centered and has the center at the bottom edge of the red div.

The solution should finally also be responsive. What do I have to consider here?

 .container { height: 300px; width: 600px; background-color: black; text-align: center; }.header { height: 40%; width: 100%; background-color: red; }.circle { background-color: blue; height: 100px; width: 100px; border-radius: 50%; display: inline-flex; }

 <div class="container"> <div class="header"> <div class="circle"></div> </div> </div>

Answer 1

you can use position and flexbox

 .container { height: 300px; width: 80%; margin: 0 auto; background-color: black; text-align: center; }.header { height: 40%; width: 100%; background-color: red; position: relative; display: flex; justify-content: center; }.circle { background-color: blue; height: 100px; width: 100px; border-radius: 50%; display: inline-flex; position: absolute; bottom: 0; transform: translateY(50%); }

 <div class="container"> <div class="header"> <div class="circle"></div> </div> </div>

Answer 2

Make header relative, and align circle to bottom with translate .

 .container { height: 300px; width: 600px; background-color: black; text-align: center; }.header { height: 40%; width: 100%; background-color: red; position: relative; /* make header container relative */ }.circle { background-color: blue; height: 100px; width: 100px; border-radius: 50%; display: inline-flex; /* bottom position with centered circle */ position: absolute; left: 50%; bottom: 0; transform: translate3d(-50%, 50%, 0); }

 <div class="container"> <div class="header"> <div class="circle"></div> </div> </div> <hr /> <:-- Option with bigger header --> <div class="container"> <div class="header" style="height; 70%;"> <div class="circle"></div> </div> </div>