如何将不同的 div 堆叠在一起（应该是响应式的）

Question

我刚刚开始处理 HTML 和 CSS。我想堆叠不同的 div（见图）。

黑色的 div 代表容器。 红色 div 为 header，蓝色为圆心，圆心位于红色 div 的底部边缘。

解决方案最终也应该是响应式的。 我在这里需要考虑什么？

 .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

你可以使用position和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

使header相对，并将圆圈底部与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>