html - 文本在图像上的 CSS 定位

Question

我目前正在尝试摆弄 Html 和 css，并希望将文本放置在图像上。我已经设法在我的主页上做到这一点，并认为我会使用相同的类，并且文本也会被正确定位。主页如下所示:Homepagehtml 代码如下所示:

<div class="textoverimage">
     <img src="./imgs/Restaurant.jpg" alt="me">
     <div class="textforoverimage"><h2>Second year IT student</h2></div>
 </div>`

CSS 看起来像这样:

.textoverimage img{
    object-fit: cover;
    width: 100%;
    height: 277px;
    position: relative;
    text-align: center;
    color: white;
  }
.textforoverimage h2{
    position: absolute;
    width: 100%;
    top: 18%;
    color: white;
    font-family: 'Segoe UI';
    font-size:60px;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
  } 

关于我的页面，我想在其中实现文本覆盖图像的相同效果，但仅在第二张图像上 如下所示:About page

html 代码如下所示:

<div class="textoverimage">
<img src="./imgs/Restaurant.jpg" alt="Restaurant">
<div class="textforoverimage"><h2>Jobs & Schooling</h2></div>
</div>

如您所见，工作和教育文本显示在页面顶部。我认为因为 textforoverimage 是绝对定位的，所以它会根据其父级的位置移动，我认为它是 textoverimage div。不过好像是根据页面定位的。

我做错了什么？我使用的 position 属性有误还是 html 错误？

Answer 1

将 position: relative 应用于 .textoverimage ，而不是图像 - 这是父元素，需要充当其子元素绝对位置的 anchor 。并将 position:absolute 应用到 .textforoverimage ，而不是它包含的 h2 。