定位文本，使其出现在图像中答案

【问题标题】：Position text so that it appears inside an image定位文本，使其出现在图像中
【发布时间】：2020-08-14 11:37:52
【问题描述】：

我是编码新手，我一直在尝试为此寻找解决方案，但到目前为止我还没有找到任何东西。我的问题是文本显示在 div 之外。 Like this.

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

这是代码：

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>

【问题讨论】：

您能否提供另一张图片来说明您想要实现的目标？您的代码的 JSFiddle 也可能会有所帮助。

标签： html css text

【解决方案1】：

显然他在 div 内，但大部分时间他都被图像占据了。

您可以尝试通过上述position property 解决此问题，或者如果您想以最手动的方式执行此操作，您可以使用margin-top 将其向上移动，例如：

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

【讨论】：

谢谢！这是最简单的解决方案！

【解决方案2】：

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

position:absolute 将允许您从不是默认的第一个父 div 的顶部/左侧定位 div (position:static) -- 通常，我们使用position:relative，如下例所示。如果没有相对/固定/绝对定位的父 div（即它们都仍处于默认值 position:static，则绝对元素将从 body 元素定位。

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

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

【讨论】：