如何让HTML的details元素展开时显示在其他article上方？

问题出在z-index的生效条件上——它只对非static定位的元素起作用，默认状态下details是position: static，所以你之前设置z-index根本不会生效。

直接按下面的方式修改CSS就能解决：

details {
  /* 添加相对定位，不改变原有布局 */
  position: relative;
  /* 设置足够高的层级，确保盖过下方的article */
  z-index: 10;
}

如果你的article元素也设置了定位和z-index，只要保证details的z-index数值比它大就可以。这样展开后的details内容就能正常悬浮在article上方了。

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