为何修改z-index无法让剪刀石头布游戏中纸张覆盖石头？

嘿，这个问题其实是CSS里z-index属性的一个常见误区！

问题根源 #

z-index属性只对设置了定位的元素生效——也就是元素的position属性值必须是relative、absolute、fixed或sticky。如果元素是默认的static定位（你的代码里就是这样），无论你设置多大的z-index值，都不会改变它的堆叠顺序。

看你代码里的这两个核心选择器：

#computerRock, #computerPaper, #computerScissors {
  z-index: 2;
  display: inline-block;
  /* 其他样式... */
  /* 缺少position属性，默认是static */
}

#playerRock, #playerPaper, #playerScissors {
  z-index: 2;
  cursor: pointer;
  /* 其他样式... */
  /* 同样缺少position属性 */
}

因为它们都是static定位，所以你在JS里设置的$("#computerPaper").css("z-index", "50")和$("#playerRock").css("z-index", "2")根本不会起作用。

解决方案 #

只需要给这些元素添加position: relative（这个定位方式不会改变元素的正常布局，最适合你的场景），就能让z-index生效：

修改后的CSS代码：

#computerRock, #computerPaper, #computerScissors {
  z-index: 2;
  display: inline-block;
  background: #878787;
  padding: 20px;
  border-radius: 50%;
  border: 3px solid #D01A14;
  vertical-align: top;
  position: relative; /* 添加这一行 */
}

#playerRock, #playerPaper, #playerScissors {
  z-index: 2;
  cursor: pointer;
  background: #878787;
  padding: 20px;
  display: inline-block;
  border-radius: 50%;
  border: 3px solid #095BB3;
  top: 0px;
  vertical-align: top;
  position: relative; /* 添加这一行 */
}

这样修改之后，当玩家选石头、电脑选纸张时，纸张元素的z-index更高，就能成功覆盖石头元素了。

额外提示 #

如果之后遇到类似z-index不生效的情况，可以先检查两个点：

1. 元素是否设置了非static的定位
2. 父元素是否形成了堆叠上下文（比如父元素有z-index且是定位元素），如果是，子元素的z-index只会在父元素的堆叠上下文里生效。

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