[英]How can I show child element above parent element AND siblings of the parent element?
My question is related to this question: 我的问题与这个问题有关:
Show child element above parent element using CSS 使用CSS在父元素上显示子元素
The response for that question, to set overflow: visible
, works for only one parent of one child. 对该问题的回答,设置
overflow: visible
,仅适用于一个孩子的一个父母。 However, I have rows of these elements; 但是,我有这些元素的行; rows of parents where I need the child to display over the parent.
父母的行,我需要孩子在父母身上显示。 I can get the child to display over the original parent, but I cannot get the child to display over siblings of the parents.
我可以让孩子显示原来的父母,但我不能让孩子显示父母的兄弟姐妹。 To give you an idea of what I'm talking about, here is a screenshot:
为了让您了解我在说什么,这是一个截图:
What I want is for the options popup, the element hiding behind the next two rows, to show up over those two rows just like it shows up over its immediate parent. 我想要的是选项弹出窗口,隐藏在接下来的两行后面的元素,显示在这两行上,就像它显示在它的直接父级上一样。 I've been messing around with it and haven't figure it out, so hopefully someone here will be able to help.
我一直在搞乱它,并没有想出来,所以希望这里的人能够提供帮助。
Here is the basic structure: 这是基本结构:
.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>
What can I do to the CSS to get the options popup to show up over all other elements? 我该怎么做才能让选项弹出窗口显示在所有其他元素上? Is there anything I need to do to the HTML?
我需要对HTML做些什么吗?
position: relative
for an element creates a new positioning context. position: relative
元素的position: relative
创建一个新的定位上下文。 Child elements of this element are positioned in this local context. 此元素的子元素位于此本地上下文中。 They cannot leave this context.
他们不能离开这种背景。 If you want to position child elements above siblings of its parent element, you should set
z-index
for its parent element to a higher value than z-index
of its siblings. 如果要将子元素放在其父元素的兄弟元素之上,则应将其父元素的
z-index
设置为高于其兄弟元素的z-index
的值。
If the effective z-index
position of the element relatively to its siblings solely depends on their DOM-tree order, then moving the element to position after all its siblings in DOM tree (if semantically appropriate) could help as well. 如果元素相对于其兄弟节点的有效
z-index
位置仅取决于它们的DOM树顺序,那么在DOM树中的所有兄弟节点之后将元素移动到位置(如果在语义上合适)也可以帮助。
Note that you can always change z-index
dynamically via JavaScript (just, in terms of Unobtrusive JS, don't forget to provide a reasonable pure-CSS alternative so that content wasn't hidden if JS is disabled). 请注意,您始终可以通过JavaScript动态更改
z-index
(只是,根据Unobtrusive JS,不要忘记提供合理的纯CSS替代方案,以便在禁用JS时不隐藏内容)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.