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

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用替代方案更新了答案。 –

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

回答

相关问题