How to arrange div structure with radius using CSS

Question

I am trying to create HTML page shown in this sample image.

I want to place other component on top of this black and maroon circles. For this I am using tag Structure of div and span. And using span background-image to apply this image as background.

My problem is what will be structure of div and span to arrange black circle on radius of div/span tags containing maroon circle as background.

Till now I have center circle placed. I don't know how to arrange other circles around it

div.table-text {
  position: fixed;
  top: 20%;
  left: 20%
}
span.table-text {
  position: inherit;
  display: block;
  width: 60%;
  height: 60%;
  background-image: url(../images/table-text.png);
  background-position: bottom;
  background-repeat: no-repeat;
}

<div class="table-text">
  <span class="table-text">
    </span>
</div>

Answer 1

Im not sure I understood the question, but I'll try to answer.

You can't use something like cos() to arrange elements on HTML, you will have to use negatives margin-top: or position: absolute;

My advise: use negative margins, for the black dots on the left and right.

Edit: I did your job, now pay me! @:

.circle {
    display: inline-block;
    border-radius: 200px;
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: black;    
}
#bigCircle {
    border-radius: 200px;    
    width: 400px;
    height: 400px;
    margin: 0 auto;
    background-color: brown;
}
#bottom {
    margin: 50px calc(50% - 50px);
}
#left {
    margin: -50px calc(25% - 50px);   
}
#right {
    margin: -50px calc(75% - 50px);
}

<div id="bigCircle"></div>
<div class="circle" id="left"></div>
<div class="circle" id="bottom"></div>
<div class="circle" id="right"></div>

JSFiddle - DEMO