我有一个包含此类行的基本html
<div id="circle">
<div id="slider"></div>
</div>
<div id="audio-player-core" class="controls">
<img src="" alt="nothing" width="65px" height="65px">
</div>
css
#circle {
width: 100px;
height: 100px;
border: 2px solid rgba(0,0,0,0.5);
border-radius: 100%;
float: left;
margin-left: 10px;
}
#slider {
position: relative;
height: 30px;
width: 30px;
background: rgba(0,0,0,0.5);
border-radius: 100%;
cursor: pointer;
}
.controls {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 99;
background-color: transparent;
width: 500px;
margin-left: 20px;
}
#audio-player-core {
border: 1px solid;
border-radius:0 10px 10px 0;
border-color: rgba(0,0,0,0.5);
}
但是我不能让它们相互重叠(特别是我希望矩形从圆圈的中心开始,同时隐藏圆圈的一部分)。当我尝试通过margin
移动一个时 - 另一个移动等等。
如何重叠它们?
答案 0 :(得分:1)
使用positioning。例如,
#audio-player-core {
border: 1px solid;
border-radius:0 10px 10px 0;
border-color: rgba(0,0,0,0.5);
position: absolute;
left: 50px;
top: 60px;
}
#circle {
width: 100px;
height: 100px;
border: 2px solid rgba(0,0,0,0.5);
border-radius: 100%;
float: left;
margin-left: 10px;
}
#slider {
position: relative;
height: 30px;
width: 30px;
background: rgba(0,0,0,0.5);
border-radius: 100%;
cursor: pointer;
}
.controls {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 99;
background-color: transparent;
width: 500px;
margin-left: 20px;
}
#audio-player-core {
border: 1px solid;
border-radius:0 10px 10px 0;
border-color: rgba(0,0,0,0.5);
position: absolute;
left: 50px;
top: 60px;
}
<div id="circle">
<div id="slider"></div>
</div>
<div id="audio-player-core" class="controls">
<img src="" alt="nothing" width="65px" height="65px">
</div>