CODEWITHSUNDEEP
htmlcss
lapots
lapots

Reputation: 13395

overlap two div elements

I've got a basic html that contain such lines

<div id="circle">
    <div id="slider"></div>
</div>
<div id="audio-player-core" class="controls">
    <img src="" alt="nothing" width="65px" height="65px">
</div>

And 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);
}

But I cannot make them overlap each other (specifically I want for rectangle to start at the center of the circle while hiding part of circle inside). When I try to move one via margin - another moves and so on.

jsfiddle

How to overlap them?

Upvotes: 0

Views: 51

Answers (1)

curveball
curveball

Reputation: 4505

Use positioning. For example,

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

Upvotes: 1

Related Questions