如何顯示父元素和父元素的兄弟之上的子元素？

Show child element above parent element using CSS

對於問題的回答，設置overflow: visible，適用於一個孩子只有一個父母。但是，我有這些元素的行;我需要孩子在父母身上展示的父母行。我可以讓孩子展示原始父母，但是我無法讓孩子顯示父母的兄弟姐妹。爲了給你什麼，我談論的想法，這裏是截圖：

screenshot

我想是對的選項彈出，隱藏後兩排的後面，該元素在這些露面兩行就像它出現在它的直接父母身上一樣。我一直在搞亂它，並沒有弄明白，所以希望這裏有人能夠提供幫助。

這裏的基本結構：

<div class="row"> 
    <div class="label">Color Scheme:</div> 
    <div class="selector"> 
     <div class="selector-inner"> 
      <div class="selector-arrow"></div> 
      <div class="selector-caption">Standard</div> 
     </div> 
     <div class="options-popup"> 
      <div class="options-item">Standard</div> 
      <div class="options-item">Dark</div> 
      <div class="options-item">Light</div> 
     </div> 
    </div> 
</div>

這裏是CSS：

.row, .selector { 
    position: relative; 
} 

.label, .selector { 
    display: inline-block; 
} 

.selector { 
    overflow: visible; 
} 

.selector-inner { 
    display: block; 
} 

.selector-arrow { 
    float: right; 
    width: 21px; 
    height: 21px; 
    background: url(arrow.png) no-repeat center center; 
} 

.selector-caption { 
    display: inline-block; 
} 

.options-popup { 
    position: absolute; 
    z-index: 100; 
    top: 0px; 
    right: 0px; 
} 

.options-item { 
    /* only for fonts and sizes */ 
}

我能做些什麼的CSS得到的選項彈出超過所有其他元素顯示？有什麼我需要做的HTML？

來源

2012-06-24 rsanchez1

你有沒有嘗試給孩子一個更高的z-index值？ – Bluefire

另外，您正在爲CSS中的圖像提供相對路徑 - arrow.png。你能給我直接的網址嗎？ – Bluefire

給孩子一個更高的Z指數不起作用。此外，現在我擁有本地的所有內容，因此沒有直接的網址，但這不重要。只需將其替換爲任何佔位符圖像即可。 – rsanchez1

position: relative爲一個元素創建一個新的定位上下文。此元素的子元素位於本地上下文中。他們不能離開這個背景。如果要將子元素定位在其父元素的同胞之上，則應將其父元素的z-index設置爲比其兄弟元素的z-index更高的值。

如果相對於其同級元素的有效z-index位置完全取決於他們的DOM樹順序，然後移動元素定位後其所有DOM樹的兄弟姐妹（如果語義適用）可以很好的幫助。

請注意，您可以隨時通過JavaScript動態更改z-index（就Unobtrusive JS而言，不要忘記提供合理的純CSS備選方案，以便在禁用JS時不會隱藏內容）。

來源

2012-06-24 22:29:19

謝謝！那樣做了。 – rsanchez1

上述案例有效。但是，如果父母的z-索引不能增加（增加父母的z-索引會隱藏它的兄弟姐妹），有沒有解決方案 –

@karthipanraj用替代方案更新了答案。 –

如何顯示父元素和父元素的兄弟之上的子元素？

回答

相關問題