HTML：獲取要顯示的子元素（較低的z-index）比其父元素？

我需要某個動態元素始終出現在另一個元素的頂部，而不管他們在DOM樹中的順序如何。這可能嗎？我試過z-index（與position: relative），它似乎不工作。我討厭變得模糊，但這是我能想到的最簡單的方式，而不用解釋它的目的和廣告的惡性。HTML：獲取要顯示的子元素（較低的z-index）比其父元素？

因此，要回顧一下，我需要：

<div class="a"> 
    <div class="b"></div> 
</div> 

<div class="b"> 
    <div class="a"></div> 
</div>

要渲染時顯示完全一樣。爲了靈活性（我正在計劃分發一個需要此功能的插件），我真的很喜歡不必訴諸於絕對或固定位置。

附錄：爲了執行我想要的功能，我提出了一個條件語句，其中重疊的子元素在阻止其父項視圖的情況下變爲透明。這不是完美的，但它是一些東西。

來源

2010-03-23 dclowd9901

這是不可能的。 – SLaks 2010-03-23 21:22:43

謝謝你的頭。你爲我節省了很多頭髮。 – dclowd9901 2010-03-23 21:29:48

這是_is_可能的 - 假設您只有1層深的嵌套（如示例中所示）。這將工作：'.a> .b，.b> .a {z-index：-1;位置：相對}'。如果你需要一個小提琴，評論，但我認爲這是相當自我解釋。 – 2015-06-17 22:13:37

如果元素構成層次結構，則不能這樣做，因爲每個定位的元素都會創建新的stacking context，並且z-index與相同堆疊上下文的元素有關。

來源

2010-03-23 21:31:49 jholster

我非常認爲這是事實，但我並不假定知道一切。無論哪種方式，謝謝大家。 – dclowd9901 2010-03-23 21:58:47

http://jsfiddle.net/6xC88/ – 2014-06-27 22:33:26

你需要的是position: absolute爲了z-index工作。

您還需要設置left和top css屬性以將元素放置在正確的位置。你可能需要用javascript來做到這一點。

來源

2010-03-23 21:20:18 mkoryak

z-index適用於定位（=相對，絕對，固定），即非靜態元素。 – jholster 2010-03-23 21:26:48

或'position：fixed;'^ _^ – EvgenyKolyakov 2015-09-21 13:37:27

我已經成功使用以下內容。

z-index：-1;

來源

2014-06-20 02:26:31

這並不回答被問到的問題 – 2014-09-14 21:26:28

Upvoted，這不值得downvote。這部分_回答了被問到的問題 - 如果他用小提琴演示會更好。 – 2015-06-17 22:10:13

我想出了一種方法，通過創建一個模仿父級的僞元素來將子元素實際放置在其元素後面。對於像下拉菜單這樣的東西很有用 - 希望它有用，八年前的用戶！

https://jsfiddle.net/x7up68s2/7/

.container > div { 

    // will be beyond its child 
    background-color: red; 
    width: 150px; 
    height: 50px; 
    z-index: 10; 

    // will be above its "child" 
    &:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background-color: red; 
    z-index: 7; 
    top: 10px; 
    } 
} 

.a > .b, 
.b > .a { 
    z-index: 5; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: teal; 
}

來源

2018-03-02 16:00:00 moesphemie

HTML：獲取要顯示的子元素（較低的z-index）比其父元素？

回答

相關問題