Javascript 使用相对和绝对div设置动画

请看一看。单击顶部链接会产生两个动画：一个将当前内容拖动到左侧，另一个将新内容拖动到浏览器窗口的中心

 $("#menu_choice4").click(function () {                              
 $('#content_home').animate({ "left": screenwidth }, 1500 );             
 $('#content_main').animate({ "left": screenwidth},1500);   
 $('#content_creations').animate({ "left": screenwidth }, 1500 );            
         setTimeout( function() {pack4()},900);
         function pack4(){
               $('#content_home').hide();
            $('#content_main').hide(); 
                            $('#content_creations').hide();
            var x4=$("body").width()/2;           
                    var y4=$("#content_mail").width()/2;
            $('#content_mail').animate({ 'left': x4-y4}, 1200 );    
         }           
         $('#content_mail').show();          
      });  

在上面的代码中，“菜单”选项4代表最后一个顶部链接，而“内容”主页、“内容”主页、“内容”创作、“内容”邮件则分别包含每个选项的顶部链接之外的所有内容。我必须将这些div设置为绝对位置，以便动画正常工作（如您从上面的网站所见）. 如果我使它们相对定位，动画就会出现问题

我的问题是为什么它们必须是绝对的而不是相对的？我应该如何使动画以正确的方式使用相对位置？我想应用响应性网页设计，但我在绝对位置方面有很多问题…

---

非常感谢

链接页面没有为我加载…我看到的许多具有响应性布局的网站使用媒体查询。这对我很有用