Translate3d父覆盖位置：绝对子

我正在尝试添加一个新元素到列表中的项目全部使用translate3d定位的列表中。我正在尝试添加的是一个下拉菜单，我正在使用position: absolute设计样式，但是由于translate3d，父元素都位于顶部。这可以解决吗？ Z指数似乎没有影响。Translate3d父覆盖位置：绝对子

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

假设我可以修复.dropdown项目我不能碰.list项目的样式？

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

来源

2017-08-09 jcmitch

它看起来像加'位置：absolute'你'row'类解决了z-index的问题......但我不知道这是导致你要找的。 [DEMO]（https://jsfiddle.net/bonez0607/3sm6w4xt/） –

你想要做这样的事情吗？ http://jsfiddle.net/etb4f0x4/1/ –

@JoeB。该解决方案完美适用于我给你的小提琴。不幸的是，我是一个白痴，并在小提琴的标记中犯了一个错误，因为它与我正在处理的真实项目不匹配。无论如何upvote给你，但如果你有任何想法这里是一个正确的小提琴。 https://jsfiddle.net/w8ra5qbe/ – jcmitch

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

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

DEMO

来源

2017-08-10 04:00:36

我从'.row'规则中删除了'position：absolute'，但是如果你需要黄色更像我发布的第一个黄色，那么可以重新添加。 –

这似乎并不奏效。如果您在中间下拉菜单上放置display：none，则可以更好地查看问题。我需要第一个下拉列表显示在第二行的顶部。与显示器的小提琴示例：没有像我提到的：https：//jsfiddle.net/8xbx0Lwg/ – jcmitch

Translate3d父覆盖位置：绝对子

回答

相关问题