position:absolute元素无法置于普通元素后方实现点击滑入菜单

调整DOM顺序、修改z-index没有达到预期，本质是两个配置问题：

• z-index 仅对设置了非static定位（即relative/absolute/fixed/sticky）的元素生效，需要放在上层的黄色.head区块默认是static定位，给它加z-index不会产生任何层叠效果
• 绝对定位的.slide-in当前会向上查找最近的带定位属性的祖先元素作为偏移参考，也就是最外层的.wrap，而非它的直接父容器.menu，层叠计算的基准错了，自然没法精准放到.head后方

调整三个地方即可实现需求：

1. 给.menu加position: relative，让内部绝对定位元素以它为偏移基准
2. 给.head加相对定位和更高的z-index，确保它始终盖在红色滑入区块上方
3. 给.slide-in设置正确的初始偏移值、过渡动画，搭配简单的点击事件切换滑入状态

完整代码如下：

.wrap {
  display: flex;
  flex-flow: column;
  background: gray;
  position: relative;
  overflow: auto;
}

.replay {
  height: 100px;
}

.menu {
  position: relative;
}

.slide-in {
  position: absolute;
  background: red;
  width: 100%;
  /* 初始状态完全隐藏在head后方 */
  transform: translate(0, -100%);
  transition: transform 0.3s ease;
  z-index: 1;
}

.slide-in.active {
  /* 滑入后显示在head上方位置 */
  transform: translate(0, 0);
}

.head {
  background: yellow;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

<div class='wrap'>
  <div class='replay'>Extra Stuff</div>
  <div class='menu'>
    <div class="slide-in">
      World
    </div>
    <div class="head">
      Normal
    </div>
  </div>
</div>

const headEl = document.querySelector('.head')
const slideEl = document.querySelector('.slide-in')
headEl.addEventListener('click', () => {
  slideEl.classList.toggle('active')
})

实现效果：初始状态红色World区块完全被黄色Normal区块遮挡，点击Normal时红色区块会从Normal后方平滑滑入显示，再次点击即可滑回隐藏。

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