时间戳

首页 > 解决方案 > 在css中将文本覆盖在图像上？

html - 在css中将文本覆盖在图像上？

问题描述

<!DOCTYPE html>
<html>
    <head>
      <title>Overlay text over img</title>
      <style>
          p{
              position:absolute;
              top: 80px;
              left: 80px;
              color: white;
          }
      </style>
    </head>
    <body>
        <img src="../images/finnish.jpeg" alt="Clean">
        <p>Clean</p>
    </body>
</html>

我的问题是为什么人们将 img 和 text 放在 html 中的 div 中，然后在 css 中将img的位置设置为relative并将文本的位置（在本例中为 p ）设置为absolute。我尝试了上面的代码，它仍然可以在没有将img的位置设置为relative的情况下工作。有人可以为我解释为什么人们这样做吗？

标签： htmlcss

解决方案

当您设置position: absolute元素的位置时，它会根据它找到的具有位置相对关系的第一个元素来设置。所以如果你不设置它，它可能会崩溃。

推荐阅读