html - 如何使用CSS在外部div上绘制内部div？

Question

我想在外部 div 上绘制一个内部 div 以便滚动。我怎样才能改变我的 CSS 来解决这个问题？

HTML代码:

<div class="sliderPath">
     <div class="slider"></div>
</div>

CSS 代码:

.sliderPath {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    width: 80%;
    height: 20%;
    margin: auto;
}


 .slider {
  border-radius: 4px;
  background:#50c2de;
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  }

https://jsfiddle.net/ImSonuGupta/0bx6uwyn/1/

Answer 1

尝试将最高位置设置为较小的值:

.slider {
  border-radius: 4px;
  background:#50c2de;
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  top: 3px;               //added this
  }

同时设置 position: relative on parent:

.sliderPath {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    width: 80%;
    height: 20%;
    margin: auto;
    position: relative;     //added this
}

updated jsfiddle