html - 重叠两个 div 元素

Question

我有一个包含这些行的基本 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 移动一个时 - 另一个移动等等。

jsfiddle

如何重叠它们？

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