我如何显示父元素和父元素的兄弟之上的子元素？ [英] How can I show child element above parent element AND siblings of the parent element?

问题描述

我的问题是与此相关的问题：

针对该问题的响应，设置 overflow：visible ，仅适用于一个孩子的一个父母。但是，我有这些元素的行;我需要孩子在父母身上展示的父母行。我可以让孩子展示原始父母，但是我无法让孩子显示父母的兄弟姐妹。为了让你知道我在说什么，这里有一个截图：

我想要的是选项popup，隐藏在接下来两行后面的元素，显示在这两行就像它出现在它的直接父母身上一样。我已经搞乱了它，并没有弄明白，所以希望这里有人能够提供帮助。

以下是基本结构：

 < div class =row> 
< div class =label>配色方案：< / div> 
< div class =selector> 
< div class =selector-inner> 
< div class =selector-arrow>< / div> 
< div class =selector-caption>标准< / div> 
< / div> 
< div class =options-popup> 
< div class =options-item>标准< / 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; 
背景：url（arrow.png）无重复中心; 
} 
 
 .selector-caption {
 display：inline-block; 
} 
 
 .options-popup {
 position：absolute; 
 z-index：100; 
 top：0px; 
 right：0px; 
} 
 
 .options-item {
 / *仅用于字体和大小* / 
} 
  

我可以对CSS做些什么来让选项弹出来显示所有其他元素？有什么我需要做的HTML？

解决方案

position：relative 为一个元素创建一个新的定位上下文。此元素的子元素位于本地上下文中。他们不能离开这个背景。如果要将子元素定位在其父元素的同级之上，则应将其父元素的 z-index 设置为高于 z- index 。

如果元素的有效位置 z-index 相对于它的兄弟姐妹完全依赖于它们的DOM树顺序，然后将它的元素移到DOM树中的所有兄弟元素（如果语义上合适的话）之后的位置也可以帮助。

请注意，您可以随时通过JavaScript动态更改 z-index （就Unobtrusive JS而言，不要忘记提供合理的纯CSS替代方案，以便在禁用JS时内容不被隐藏）。

My question is related to this question:

Show child element above parent element using CSS

The response for that question, to set overflow: visible, works for only one parent of one child. 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:

<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>

Here is the 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 */
}

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?

解决方案

position: relative for an element creates a new positioning context. 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.

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.

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).

这篇关于我如何显示父元素和父元素的兄弟之上的子元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！