如何实现文本与div重叠？需设置页面右下角absolute定位

我需要让标题文本覆盖在下方的白色div之上，同时将所有元素放置在页面右下角，已为容器设置position: absolute。当前效果与目标效果如下：

当前效果：
目标效果：

修改后的代码 #

CSS

body {
  background-color: black;
}

.title {
  color: white;
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: -20px;
  padding-right: 20px;
}

.artist {
  color: black;
  font-size: 60px;
  line-height: 60px;
  padding-left: 10px;
}

.artist-container {
  text-align: left;
  background-color: white;
  display: inline-block;
  padding: 0 10px;
}

.nameContain {
  font-weight: bold;
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 50%;
  font-size: 50px;
  padding: 20px;
}

HTML

<div class="nameContain">
  <span class="title">Smells Like Teen Spirit</span>
  <div class="artist-container"><span class="artist">Nirvana</span></div>
</div>

关键改动说明 #

• 给.title设置position: relative和z-index: 1，提升标题层级以覆盖白色容器；通过margin-bottom: -20px让标题向上偏移实现覆盖效果，padding-right避免文字紧贴白色块。
• 将.artist-container改为inline-block并移除width: 100%，让白色容器宽度自适应文字内容，而非占满父容器。
• 给.nameContain添加padding，避免元素紧贴页面右下角边缘；给.artist和.artist-container添加内边距，优化文字与白色块的间距。

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