我怎样才能显示父元素的父元素的兄弟姐妹，上面的子元素？(How can I show child e

我的问题是有关这个问题：

显示使用CSS父元素上方子元素

对于问题的回答，设置overflow: visible ，适用于一个孩子只有一个父母。 不过，我有这些元素的行; 父母的行，我需要孩子在显示父。 我可以让孩子在显示原始父，但我不能让孩子上显示父母的兄弟姐妹。 为了给你什么，我谈论的想法，这里是截图：

我想是的选项弹出，隐藏后两排的后面，该元素在这两个行露面，就像它在它的直接父显示出来。 我一直梅辛与它周围并没有搞清楚，所以希望有人在这里将能够帮助。

这是基本结构：

 .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 */ } 

 <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得到的选项弹出超过所有其他元素显示？ 有什么我需要做的HTML？

Answer 1:

position: relative对于一个元素创建一个新的定位上下文。 该元素的子元素被定位在该局部背景。 他们不能离开这个环境。 如果你想位置上方其父元素的同级子元素，你应该设置z-index其父元素比更高的值z-index它的兄弟姐妹。

如果有效z-index相对于其同级元素的位置完全取决于他们的DOM树顺序，然后移动元素它在DOM树中的所有兄弟姐妹后位置（如果语义适用）可以很好的帮助。

请注意，您可以随时更改z-index动态地通过JavaScript（只是在不显眼的JS的条款，请不要忘记提供一个合理的纯CSS替代因此未隐藏的内容，如果JS被禁用）。

文章来源: How can I show child element above parent element AND siblings of the parent element?