如何將不同的 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>