How can I show child element above parent element AND siblings of the parent element?

Question

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:

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

Emeric

Have you tried giving the child a higher z-index value? – Exigible

Also, you are giving a relative path to an image in your CSS - arrow.png. Can you give me the direct URL for it? – Exigible

Giving the child a higher z-index doesn't work. Also, right now I have everything local so there's no direct URL, but that shouldn't matter. Just replace it with whatever placeholder image. – Emeric

Answer 1

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

Lorola

The above case works. But if z-index of parent cannot be increased(increasing parents z-index will hide it sibling), is there any solution – Armitage

@karthipanraj Updated the answer with alternatives. – Lorola