why does html element get clipped

Question

I'm trying to get create a custom ionic control that will have an autocomplete drop-down. Normally how I would go around this is by creating a nested element of position:relative; followed by an child element with position:absolute;

But for some reason when I tried it on my control in ionic the control get's clipped. Initially I thought to assign a simple z-index would ought to do the the trick, but to my surprise it did not have any effect. Upon some close reading it seems to have something to do with stacking contexts; to make it worse it seems that ionic also marks elements .item-md as position:relative

Any idea how i could make a simple example like this work?

Edit:

I tried to reproduce the case in a simpler setup, but generally, it seems my concept should work. When I put it inside of ionic it gets clipped again.

https://jsfiddle.net/4exLpcv5/

Answer 1

After a lot of fiddling around and inspecting the dom tree I was able to partially recreate the problem in jsfiddle. The overflow: visible as mentioned by @willactual is part of the awnser.

Ionic's .item have overflow set on hidden. Which in forces the browser clip out of bound rendering. When I reset the overflow to visible at least in my minimum recreation it behaved as normal. However, trying to bring my example into an actual ionic application, still made the element got clipped.

Now the second part of the solution I stumbled upon by accident is the contain: content. It seems over the years CSS has had some extra properties to act as performance hints. Be it, that ionic actually makes use of these hints and set's the contain property which in result clips the html element.