Javascript 如何在不影响其他元素的情况下在页面上定位表？

我希望能够移动已创建的表，而不影响或移动已编码的SVG。我现在的css定位是：

 .table2 {
  margin-top: 300px;
  margin-left:800px;

    }

这会将我的表格放置在我想要的位置，但会推动页面上已经存在的所有内容。在不影响任何其他元素定位的情况下，如何进行此操作

这是我的.js：

  <script>

   $(document).ready(function(){
   $('.counties').on("click",function(e){ 
   $('.table2').fadeIn();
   });
 });

 </script>

$（文档）.ready（函数（）{
$（'.countries'）。在（单击）上，函数（e）{
$（'.table2'）.fadeIn（）；
});
});

这是我的桌子：

<table class="table2" bgcolor="#F5F5F5">
<tr>
<td><pre><font color="696969"face="Century Gothic">###### CHILDREN NEED A GIFT
            IN THIS COUNTY</font></pre></td>
</tr>
<tr>
<td><button><font color="696969"face="Century Gothic">Volunteer</font> 
</button><button><font color="696969"face="Century Gothic">Donate</font> 
</button></td>
 </tr>
</table>

######孩子们需要礼物
在这个县
志愿者
捐赠

这是由于工作台位置而移动的内容：

使用CSS属性

位置：绝对
和
顶部：
，
左侧：
而不是margins是的，我已经尝试过了。但是我在单击时会将表放在fadeIn（）上，当我使用position:absolute route时，表会淡入，然后立即消失。向我们展示您的fadeIn（）函数以及相关的HTML。好的，我这样做了，如果您将它作为一个片段放置，以便我们可以观看它，那将非常棒。或者给我们一个Codepen或jsfiddle上的链接
  <path class="counties"
 style="font-size:12px;fill:#d0d0d0;fill-opacity:1;fill- 
  rule:nonzero;stroke:#000000;stroke-width:18.65967751;stroke- 
  linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke- 
  dasharray:none;stroke-opacity:1;marker-start:none"
  d="m 471.60261,246.44442 29.99111,-0.99619 8.36129,-11.40059 
  -0.16978,-0.49813 0.58508,-0.68252 h 1.28346 l 2.45362,1.10686 
   4.6997,5.90324 5.05827,15.71735 1.37784,5.53421 0.11332,0.44279 
   1.52883,11.1239 0.41524,4.8333 0.26423,10.23838 0.50959,34.0174 
   -24.17783,3.63415 -6.11526,0.16628 -15.1371,-10.57045 -25.87655,4.99926 
   -21.25234,27.68986 -9.45597,-12.37832 -7.04008,-9.31609 9.4371,-6.8256 
    10.94705,-12.63657 v -0.59033 l -1.00034,-1.73412 33.1997,-57.77781"
    id="Monmouth"
    inkscape:connector-curvature="0" />