翻译3d父覆盖位置:绝对孩子

Question

我正在尝试将一个新元素添加到列表中，其中列表项都使用translate3d进行定位。我尝试添加的是一个下拉菜单，我正在使用position: absolute样式，但由于translate3d，父元素都位于顶部。这可以解决吗？Z 指数似乎影响为零。

这是一个显示基本定位问题的小提琴：http://jsfiddle.net/etb4f0x4/

假设我无法触摸.list项目的样式，我可以修复.dropdown项目吗？

编辑：新小提琴 --> https://jsfiddle.net/w8ra5qbe/

Answer 1

您可以添加一个名为.row span的 css 规则，并向其添加以下内容。要找到问题的根源，您需要将position属性添加到要添加z-index的规则中。这些元素的默认值为position: static，忽略z-index。

.row span {
position: absolute;
background: yellow;
z-index: -1;
}

演示