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?
This is impossible as a child's z-index is set to the same stacking index as its parent. You have already solved the problem by removing the z-index from the parent, keep it like this or make the element a sibling instead of a child.
Using CSS position property: The position: absolute; property is used to position any element at the absolute position and this property can be used to stack elements on top of each other. Using this, any element can be positioned anywhere regardless of the position of other elements.
It's easy to apply style to a child element, but if you want to apply style to a parent class that already has child elements, you can use the CSS selector child combinator ( > ), which is placed between two CSS selectors. For example, div > p selects all <p> elements where the parent is a <div> element.
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With