如何让未隐藏元素层级置顶，而非遵循DOM节点先后顺序显示？

问题根因 #

z-index未生效是因为你没有遵循堆叠上下文的规则：你当前给卡片子元素设置z-index是无效的，因为每张卡片的顶级父容器（#a、#b、#c、#last）都是默认static定位，没有独立的层级权重，最终整体层级由父容器在DOM中的先后顺序决定，排在后面的父容器整体层级更高，和子元素的z-index无关。

修复步骤 #

1. 新增CSS样式 #

给所有卡片外层容器增加定位属性和层级基础规则，新增激活态的高层级样式：

/* 给所有卡片外层容器设置相对定位和基础层级 */
.aa, .ab, .ac, #last {
  position: relative;
  z-index: 1;
}
/* 激活态卡片层级最高 */
.active-card {
  z-index: 999;
}

2. 修改JS逻辑 #

每次翻开新卡片时，先清除所有卡片的激活态，再给当前翻开的卡片添加激活态类即可，这里以第一个卡片显示函数为例，其余三个函数同理修改：

function first_function(){
  // 重置所有卡片的激活状态
  document.querySelectorAll('.aa, .ab, .ac, #last').forEach(el => el.classList.remove('active-card'));
  console.log("test1");
  const currentCard = document.getElementById("a");
  currentCard.classList.remove("hide");
  currentCard.classList.add("active-card"); // 给当前卡片设置最高层级
  document.getElementById("a2").classList.remove("hide");
  currentCard.style.color = "white";
}

剩下的second_function、third_function、last_card按照同样逻辑，给对应id的卡片容器添加active-card类即可。

修改完成后，每次新抽出的卡片都会获得最高层级，不受DOM顺序影响。

可选替代方案 #

如果不想修改z-index，也可以利用DOM天然的层级规则：每次显示卡片时，把当前卡片的DOM节点移动到.all-wrap的最后一个子节点位置，排在最后的节点默认层级更高，示例代码：

// 对应卡片显示函数内添加这段逻辑即可
const allWrap = document.querySelector('.all-wrap');
allWrap.appendChild(document.getElementById("a"));

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