How to expand a slider over other elements when a button is hovered?

I've got some buttons in a horizontal div. Most of the buttons are just buttons, but one is a volume button. I'd like it to work similarly to a volume button on YouTube where upon hover, it'll expand a volume slider. However, I'd like to have the expansion be vertical over other elements on my page. I'll be using the slider from `bits-ui` since I'm using Svelte without tailwind (normal css), and this is pretty much the only components library option without tailwind. Could someone give me a hand with this? This is beyond what I'm capable of doing and I'm having trouble finding helpful resources on this. Here's what I have so far: ```html <div class="footer"> <div class="playback-bar-area"> <div class="buttons-bottom"> <span class="volume-button-container"> <button class="action-button">Volume Button Here</button> <div class="volume-slider"> <div class="volume-slider-content"> <Slider.Root type="single" value={0} step={1} max={100} min={0}> <span class="span-slider-range"> <Slider.Range class="range"> </Slider.Range> <Slider.Thumb index={0} class="thumb"> </Slider.Thumb> </span> </Slider.Root> </div> </div> </span> <button type="button" class="action-button" name="other buttons">other buttons</button> ... <button type="button" class="action-button" name="other buttons">other buttons</button> </div> </div> </div> ```