图片背景上方H2标题多单词时下沉重叠问题求助

核心问题1：CSS语法错误 #

你写的top: 50‰里的符号是千分号（‰），不是CSS认可的百分号（%），浏览器无法识别这个无效值，导致标题垂直定位异常，进而引发文字排版错乱。

核心问题2：父元素未设置定位 #

#showcasetittel使用了position: absolute，但它的父容器.showcase没有设置position: relative，这会导致标题相对于整个文档而非图片容器定位，位置计算错误间接影响文字布局。

核心问题3：不必要的高度强制 #

给标题设置min-height: 300px会强制标题占据最小300px高度，当标题内容行数增加时，行高与容器高度不匹配，容易出现文字重叠。

修复后的代码 #

CSS代码 #

/* 给父容器添加相对定位，让绝对定位的标题以它为基准 */
.showcase {
  position: relative;
}

#forsidebilde {
  width: 100%;
  height: auto;
}

#showcasetittel {
  position: absolute;
  top: 50%; /* 修正为正确的百分号 */
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 5em;
  z-index: 1;
  /* 可选：添加行高保证多行文字间距正常 */
  line-height: 1.2;
}

HTML代码 #

<div class="showcase">
  <img id="forsidebilde" src="bilder/forsidebilde.jpg" alt="Bilde av fjell og fjord.">
  <h2 id="showcasetittel">Velkommen Til Oss</h2>
</div>
<section id="main">

内容的提问来源于stack exchange，提问作者BlackViper