如何将计算出的百分比分配为DIV's使用JQuery(或JavaScript）的边距

我正在构建一个使用Jquery路径动画的页面。动画化的DIV在页面加载时通过查询进行定位，然后进行动画化。动画完成后，我希望使用百分比边距通过css定位DIV，这样当调整屏幕大小时，它们将保持相对的结束位置。我的问题似乎是，我无法使用.css（）分配百分比边距，即使我目前将其作为字符串传递x%！我是编程新手，所以我可以利用我能得到的所有帮助（和经验丰富的眼睛）。这也是我的第一个问题，所以如果我发错了，请耐心等待。我使用的脚本和css文件很大（更不用说JQuery2.x），所以我粘贴了以下代码片段：

HTML:

<div>
  <div class = "frame">
  <div class = "photo">
</div>
<div class = "orbit one"></div>
<div class = "orbit two"></div>
<div class = "orbit three"></div>
<div class = "orbit four"></div>
<!--<div class = "orbit five"></div>
<div class = "orbit six"></div>-->
</div>

CSS：

.photo {
  z-index: 1;
  border-radius: 100%;
  background: #aef;
  position: relative;
  height: 35%; /*380px*/
  width: 35%; /*380px*/
  margin: 8.33% 0% 0% 33.5%;     /*50px 0px 0px 268px*/
}
.orbit {
  z-index: 0;
  border-radius: 100%;
  background: Red;
  height: 10%;/*15%*/
  width: 10%; /*15%*/
  position: relative;
}

JS:

fix: function fix(button, position) {
    var left = position.left.toString();
    var top = position.top.toString();
    console.log(top);
    console.log('left: ' + left.concat('%'));
    button.css({'margin-left': left + '%'});                    
    button.css({'margin-top': top + '%'});        
    console.log(top);
    console.log('fix received: ' + button);
    console.log('and set top margin to: ' + button.css('margin-top'));
    console.log('and left margin to: ' + button.css('margin-left'));
}