我想在外部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%;
}
答案 0 :(得分:0)
尝试将顶部位置设置为小值:
.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
}
答案 1 :(得分:0)
只需.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}}