Translate3d父级涵盖职位：绝对子女

Question

我正在尝试将新元素添加到列表中，其中列表项全部使用translate3d定位。我试图添加的是一个下拉菜单，我使用position: absolute设置样式，但由于translate3d，父元素全部位于顶部。这可以修复吗？ z-index似乎没有影响。

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

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

编辑：新小提琴 - ＆gt; 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;
}

DEMO