调整屏幕大小时 HTML/CSS 元素移动

Question

我正在制作一个几乎完成的节拍器，除了当我降低屏幕高度时，音量 slider 向上移动，其他元素向左移动。我怎样才能阻止这个？任何帮助都会很棒，谢谢。
HTML

<div class="controls">
            <input type="range" class="volume-slider kick" max="100" min="0" value="100">
            <h1>Kick</h1>
            <button data-track="0" class="mute kick-vol">
                <i class="fas fa-volume-mute"></i>
            </button>
            <select name="kick-select" id="kick-select">
                <option value="./BeatSounds/kick-classic.wav">Classic Kick</option>
                <option value="./BeatSounds/kick-808.wav">808 Kick</option>
                <option value="./BeatSounds/kick-heavy.wav">Heavy Kick</option>
                <option value="./BeatSounds/kick-tight.wav">Tight Kick</option>
                <option value="./BeatSounds/kick-tape.wav">Tape Kick</option>
            </select>
        </div>

CSS

.volume-slider {
  display: flex;
  -webkit-appearance: slider-vertical;
  height: 3.5rem;
  margin: 1rem 0rem;
  position: absolute;
  cursor: pointer;
  outline: none;
}

.volume-slider.kick {
  left: 5vh;
  top: 19vh;
}

Answer 1

更改 top:19vh至top:5rem (或使用 rem 的任何其他尺寸)来自您的 .voume-slider.kick元素。