I have a .footerdot div, which lies at the bottom of page with a bluedot image aligned to center of the page and overlapping the container div. I'm attaching the image for better understanding how the layout should looks like.
Here is the code:
<div class="footerdot">
<div class="dot">
<img src="images/bluedot.png" alt="bluedot"/>
</div>
</div>
From the image I understand that you are trying to create a slider. The footerdot acts as the slider base and the dot is used to slide over it.
This includes overlapping the dot over footerdot. So to overlap a div over another div, we need to place both footerdot and dot inside another parentdiv with position: relative.
Now both the child divs are relayively positioned to their parentdiv. The flow will be normal here.
In order to place dot over footerdot, i.e we are not altering the position of footerdot but the dot. So we need to position the dot absolutely to it's parent. Add position:absolute to dot. Now dot overlaps the footerdot. Give dot a fixed width and height. eg: height: 20px; width: 20px.
But dot is still not centered on the footerdot. Instead it lies on the top left corner. In order to achieve that we need to add a dotparent div to the dot, which takes the width of the footerdot and we can center the dot inside it. But again we also need to shift the property position: absolute from dot to dotparent. And add left: 0; right: 0 to dotparent, so that it occupies the whole width of the parent from left to right. Now the width of dotparent is same as footerdot. dot can be centered inside the dotparent by applying margin: 0 auto on dot.
Finally the Html structure:
<div class='parentdiv'><div class='footerdot'></div><div class='parentdot'><div class='dot'></div></div></div>
