如何通过CSS设置实现一个<div>元素显示在另一个<div>上方

红块盖住标题是CSS层叠规则导致的：

• z-index 仅对非static定位的元素生效，你给.main-title设置了z-index:1但没配置定位属性，这条规则完全无效
• .trait设置了position: relative属于定位元素，默认层级就高于静态定位的普通元素，再加上top: -16px让它向上偏移，自然会盖住上方的标题。

不需要改HTML结构，只需要调整.main-title的样式，给它加相对定位，把z-index设得比.trait高即可：

.main-title {
  font-weight: bold;
  position: relative;
  z-index: 3;
}

改完后标题文字就会显示在红色方块上方，实现你要的高亮下划线效果。

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