Vue-multiselect: Multiselect fold-out visually below other content

[axtg]

Reproduction Link

Not applicable

Steps to reproduce

Have besides the multiselect component, another component that loads its contents dynamically (axios).

Desired behaviour

Show the select fold-out on top of the other component's results.

Actual behaviour

As the other component renders last, it will always render on top of the multiselect.

A picture says more than a thousand words...

Already tried

Z-index (e.g. -10) on result cards.
Result: elements become unclickable as they render behind the parent div

Z-index (e.g. 10) on multiselect__select classes (e.g. active)
Result: works when done in Firefox DOM inspector, but not when applied to code. Which I assume has to do with the later rendering of the results component.

Any ideas?

[shentao]

Wrap the component inside a div with position: relative and some higher z-index.