I want to make a slider between two sides of my website so users can adjust the sizes of the two sides. I want the slider to be like a narrow line with a "bubble" in the center for it to be easily draggable, but the bubble won't overflow the line, because it is div inside the div
my code looks like
main { height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center;}main #separator { height: 100%; width: 3px; background-color: grey; z-index: 100; display: flex; align-items: center; justify-content: center; cursor: e-resize; overflow: visible;}#separator #separator-bubble { width: 40px; height: 10px; border-radius: 5px; background-color: grey; z-index: 1000;}<main><div id="separator"><div id="separator-bubble"></div></div></main>I tried overflow: visible; and that stuff but nothing helped
