How to set z-index of dropdown div - css

Question

Problem:
I am trying to create a dropdown. When input is focused, the div below it appears. But I expect the div to be at higher z-index. If the div is at higher z-index, then button below it will be covered, but right now div does not take any z-index.
Code:
I have this example on which I am working now:
class Main extends React.Component {
render() {
return( <div style={{width: 200}}>
<input className="input" />
<div className="dropdown" style={{ position: 'absolute', zIndex: 9999 }}></div>
<button>Hello</button>
</div>
)
}
}
ReactDOM.render(
<Main></Main>,
document.getElementById('example')
);
Here is CSS:
html, body {
height: 100%
}
body {
background: #333;
font-family: Helvetica Neue;
}
input {
width: 100%;
}
input + div.dropdown {
background-color: #ffff00;
display: none;
height: 200px;
width: 100%;
}
input:focus + div.dropdown {
display: flex;
}
Here is the plunker of the same code:
https://plnkr.co/edit/B8Kjhv6rUOv0s7QKotxI?p=preview
What I tried:
If I change the position of dropdown div to absolute, then z-index is applied, but the width of the div is equal to the screen width.
I am creating a reusable component, so I can't give fixed width.
Note:
Fixed width given to main div is just an example but in actual use case, the width of main div will be automatically determined by the 100% width of its parent component.

Answer 1

In Summary:
Declare position relative on the containing (parent) element to allow a measure of control over absolutely positioned sibling element's width.
About positioned elements and stacking context:
A few things to consider when dealing with positioned elements and stacking context:
z-index property values will only apply to positioned elements.
positioned elements are elements with position property values defined as absolute, fixed, relative or
stickyexperimental; this does not include static,
the default positioning of any element.
When declaring an element as an absolutely positioned element
(absolute or fixed) you are removing the element from the
natural document flow; which simply means the element is no longer
interacting with sibling elements in the way relative or static
elements do (imagine the element "siting above" the rest of the DOM).
By default, an absolutely positioned element's position is
"relative" to the window; this means if you offset its position
with left or right property values it'll move a distance equal to
the property value from the window. You can position an element
with a position property value of absolute (not fixed) relative
to any containing element if you declare relative positioning to
that containing element.
This was the issue you were observing in your use-case; since the
nested .dropdown element was positioned absolute it was taken out
of the natural flow and occupied the full available width of the
containing document, so in order to restrict it to the width of its
containing element, position: relative should be declared on its
containing element, e.g:
<div style="width:200px;position: relative;" data-reactid=".0">
<input class="input" data-reactid=".0.0">
<div class="dropdown" style="position:absolute;z-index:9999;" data-reactid=".0.1"></div>
<button data-reactid=".0.2">Hello</button>
</div>
It would probably be better (and more scallable) to attribute a class selector to this element as well so that you can manage and maintain these styles externally with other declared styles (in style.css), e.g:
Amended html structure:
<div class="foobar" data-reactid=".0">
<input class="input" data-reactid=".0.0">
<div class="dropdown" style="position:absolute;z-index:9999;" data-reactid=".0.1"></div>
<button data-reactid=".0.2">Hello</button>
</div>
Additional css declarations:
.foobar {
width:200px;
position: relative; /* required for nested absolute element */
}
Reference:
position - CSS | MDN
z-index - CSS | MDN