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