将滑块移到下方并使用CSS进行动画处理

Question

我有一个滑块，它控制滑块下方显示的小动画。我很难让滑块移到动画下方。我尝试使用填充和边距尝试将滑块调低，但它只是将所有内容向下移动。该应用程序是react-app，动画是在P5JS中创建的。

我的CSS如下：

#animation {
  margin: auto;
  display: flex;
  justify-content: center ;
  align-items: center;
  margin-top: 3vw;
}

.slider {
  margin :auto;

}

这是我的DOM

render(){
const wrapperStyle = { width: 400}
return (
  <div className="App">
    <div className="animation" ref={this.renderRef}></div>
    <div className="w-slider"style={wrapperStyle}>
      <Slider
      min={20}
      max={40}
      value={this.state.w}
      defaultValue={25}
      marks={{ 20:20, 30:30, 40:40}}
      steps={null}
      onChange={this.onSlide.bind(this)}

      />
    </div>
    {/* <button className="button"  onClick={this.onSlide}>Increment</button> */}


  </div>
);

}   }

任何帮助将不胜感激。