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父覆蓋位置：絕對子

回答

相關問題