Html 如何创建两个div形状以相互覆盖

如何使用css形状创建两个单独的div以彼此重叠？我还需要能够将内容加载到特定的div

形状是圆形，后面是圆形矩形。我需要能够放置自定义img，以适应在圆圈内，并将小副本和图像放入矩形

有什么建议吗？现在，我把所有的内容都放在一个分区里

<div class="box">
<img src="images/profile_image.png" /><br />
First Last <br />Chicago, IL
<br /></div>

---

对于此任务，我将使用2个div，并使圆具有z索引值，以便它与矩形div重叠。使边界半径大小相当大，以便圆div与该形状精确相似

尝试使用以下代码：

CSS:

#circle {
background-color:#333333;
width:50px;
height:50px;
border-radius:25px;
z-index:10;
margin-left:25px;

}

#rectangle {
width:100px;
height:50px;
border-radius:10px;
background-color:#AAAAAA;
}

HTML:

---

这是一张

谢谢！你知道我有没有办法在形状中添加段落或img？我试着把p标签放在其中一个形状之间，但它在两个形状中都不是自包含的。我想是的。给我几分钟时间，我会设置另一个提琴。这是更新的jfiddle，你要找的东西：忘了提一下，我不建议在你想要放置图像的形状内放置文本，因为如果你在形状内放置标记，它会向下推图像本身。然而，如果你采取这种方法，你必须非常精确地定位你的图像。希望这一切都有帮助！

#circle {
background-color:#333333;
width:50px;
height:50px;
border-radius:25px;
z-index:10;
margin-left:25px;

}

#rectangle {
width:100px;
height:50px;
border-radius:10px;
background-color:#AAAAAA;
}

<div id ="rectangle">
<div id="circle">
</div>
</div>