定位文本，使其显示在图像中

Question

我是编码新手，我一直在努力寻找解决方案，但到目前为止还没有找到任何东西。我的问题是文本显示在div之外。像这样。

如果我不使用边界半径，我只能在里面有文本，但我想保留它。

这是代码：

div.polaroid {
text-align: center;
padding: 50px 50px;
}
div.prod-img {
border-radius: 35%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
padding: 0px 0px 70px 0;
}

<div class="col-lg-4 polaroid">
<a href=""> <img class="prod-img" src="" alt="" />
</a>
<div>
<p>  Name 1 </p>
</div>
</div>

Answer 1

显然他在div内部，但在大多数情况下，他都被图像占据了。

你可以尝试通过如上所述的position属性来解决这个问题，或者如果你想以最手动的方式来做这件事，你可以使用margin-top将其向上移动，比如：

<p style="margin-top: -25px"> Name 1 </p>

Answer 2

您可以使用position:absolute将底部div从正常HTML流中移除，并将其放置在前面的元素之上。

position:absolute将允许您从第一个非默认父div(position:static(的左上角定位div——通常，我们使用position:relative，如下例所示。如果没有相对/固定/绝对定位的父div(即它们都仍处于默认值position:static(，则绝对元素将从主体元素定位。

与position:absolute一起，您还可以使用cssz-index将一个元素升高或降低到其他元素之上/之下。因此，例如，如果您有几个div被定位为绝对，那么您可以使用z索引来决定什么位于什么之上。

div.polaroid {
position:relative;
text-align: center;
padding: 50px 50px;
border:1px solid red;
}
.prod-img {
border-radius: 35%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
padding: 0px 0px 70px 0;
}
#onTop{
position:absolute;
top: 120px;
left: 370px;
}

<div class="col-lg-4 polaroid">
<a href=""> <img class="prod-img" src="http://placekitten.com/250/50" alt="" /></a>
<div id="onTop">
<p>  Name 1 </p>
</div>
</div>

参考文献：

https://www.freecodecamp.org/news/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd/

https://www.lifewire.com/absolute-vs-relative-3466208