使用CSS Grid堆叠元素异常：Begin元素无法堆叠求助

核心问题点 #

• HTML标签未闭合：最后一个包含BEGIN的<h1>标签缺少闭合标签</h1>，浏览器解析DOM时会出现结构异常，干扰布局渲染。
• Grid布局作用对象错误：你将grid-column和grid-row应用在了<a id="begin">标签上，但该标签是<h1>的子元素，并非grid容器（body）的直接子元素。grid布局的定位规则仅对容器的直接子元素生效，所以这个设置无法让BEGIN和其他元素堆叠，反而它的父级<h1>会默认占据grid的新单元格。
• 额外样式错误：全局选择器*中的background-color: dark red;写法错误，带空格的颜色名无法被浏览器识别，应改为darkred或十六进制值#8B0000。

修正后的代码示例 #

CSS代码

* {
  font-size: 200px;
  font-family: Arial;
  background-color: darkred;
  font-weight: 900;
}

body {
  margin: 0;
  padding: 0;
  display: grid;
}

#title-rock {
  background: url(https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/shiny-black-rocks-micha-pawlitzki.jpg);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
}

#title-paper {
  background: url(https://thumbs.dreamstime.com/b/shoot-wrinkled-paper-texture-177335074.jpg);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
}

#title-scissors {
  background: url(https://images.freecreatives.com/wp-content/uploads/2016/01/Scratched-Shiny-Metal-Plate-Texture.jpg);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
}

#title-begin {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
}

#title-begin a {
  color: black;
  text-decoration: none;
  font-size: inherit;
}

HTML代码

<h1 class="title-text" id="title-rock">ROCK</h1>
<h1 class="title-text" id="title-paper">PAPER</h1>
<h1 class="title-text" id="title-scissors">SCISSORS</h1>
<h1 class="title-text" id="title-begin"><a href="game.html">BEGIN</a></h1>

说明 #

1. 给包含BEGIN的<h1>添加id="title-begin"，并将grid定位属性应用到这个h1上，确保它作为body的直接子元素，和其他三个h1处于同一个grid单元格。
2. 修复未闭合的h1标签，保证DOM结构正确。
3. 修正全局背景色的写法，同时让a标签继承父元素的字体大小，避免样式不一致。

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