Question

我想在外部div上绘制一个内部div用于滚动目的。如何更改我的CSS来解决这个问题？

HTML code：

<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
  }

还设置位置：父亲的亲戚：

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

updated jsfiddle

Answer 2

只需.sliderPath position:relative为其子项的基本位置.slider，并使top .sliderPath { border-radius: 25px; background: #73AD21; padding: 20px; width: 80%; height: 20%; margin: auto; position:relative; } .slider { border-radius: 4px; background:#50c2de; position: absolute; width: 50px; height: 50px; left: 50%; top:100% }与其父级相比100％。

.sliderPath

修改

如果您需要多张幻灯片，只需将margin-bottom添加到等于.slider高度的.sliderPath { border-radius: 25px; background: #73AD21; padding: 20px; width: 80%; height: 20%; margin: auto; position:relative; margin-bottom:50px; }。所以它会是：

{{1}}

如何使用css在外部div上绘制内部div？

2 个答案: