如何实现Flexbox列表内DIV中iframe与div的z-index堆叠及居中定位

两个设置遗漏是导致当前效果不符合预期的关键：

• z-index仅对非static定位的元素生效。当前新添加的div只配置了z-index:1，没有修改默认的position: static，浏览器会直接忽略这个z-index设置，完全无法实现堆叠层级控制。
• 新div当前处于正常文档流内，作为块级元素会自动占据独立布局空间，自然会顺着iframe的排列方向换行落在下方，而不是脱离文档流叠在iframe上层。

原有父容器div#0已经设置了position: relative，可以直接作为绝对定位的参照容器，不需要修改原有样式，仅调整新div的样式即可达成目标：

1. 为新div添加position: absolute属性，既让元素脱离正常文档流不再占用布局空间，同时激活z-index的生效条件
2. 配置定位属性实现右侧、垂直居中的布局：
   • 设置right: 0让元素贴齐父容器右侧边缘
   • 搭配top: 50%和transform: translateY(-50%)实现无依赖的垂直居中，不需要提前获知元素自身高度
3. 保留z-index: 1配置，由于iframe默认处于普通文档流层级，这个值足够让新div稳定叠在iframe上方

新div的完整参考样式：

<div id="anotherDiv" style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1;"></div>

如果调整后仍出现新div被iframe遮挡的情况，只需核对两点：

• 新div的position属性不能为static
• 新div的z-index值需大于iframe自身设置的z-index值（iframe未手动设置z-index时默认值为auto，任意正z-index值都可正常生效）

另外外层body配置的flex-column布局不会干扰父容器内部的绝对定位逻辑，不需要调整外层flex的相关参数。

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