关于通过JS移动脱标盒子left或top值时遇到设置的值与展示效果不一样的问题

最近自己写些案例时遇到了这样的问题：

//先写一个简单的布局和样式(省略了html,head,body标签)
//布局：在一个父盒子中嵌入一个子盒子
<div id="parent">
	<div id="child"></div>
</div>

//样式
<style type="text/css">
	* {
			margin: 0;
			padding: 0;
		}
		#parent {
			width: 200px;
			height: 200px;
			margin: 100px auto;
			background-color: red;
			position: relative;
		}
		#child {
			width: 100px;
			height: 100px;
			background-color: green	;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			//margin-left = -50px; 也可以
		}
</style>

现在的效果是这样：

现在盒子在父级元素中居中了，我通过JS去移动子盒子：

<script type="text/javascript">
//先获取子元素对象
	var childObj = document.getElementById("child");
//通过下面两种方式都可以获取对象的属性
//获取元素距离左边的距离
	console.log(childObj.offsetLeft);//结果：100	返回值数字类型
	console.log(getComputedStyle(childObj,null).left);//结果：100px  返回值字符串类型
</script>

那么疑问来了，父级元素宽度是200px，子级元素的宽度是100px，居中之后，左右距离应该为50px才对，如下图所示：

那么，如果此时我们设置子级元素的left值为0时，会是怎样的呢？我们来试一下下面的代码：

<script type="text/javascript">
//先获取子元素对象
	var childObj = document.getElementById("child");
//设置属性值，令子级元素的left = 0px；
	childObj.style.left = "0px";
</script>

看下效果图：

那么，为什么不是下图那样呢？

因为，此时子级元素的左外边距边界在子级元素的中间，在样式中设置了transform: translateX(-50%);，图像往左移动了一半，但是子级元素的左外边距还是在原来的位置，下面通过图片帮助大家更好理解：

1. 如果在样式中，没有添加transform: translateX(-50%);或者margin-left = -50px;时，此时左外边距边界（坐标Y轴）就是绿色盒子的左边界
   
2. 当添加transform: translateX(-50%);或者margin-left = -50px;时，此时相当于绿色盒子往左移动-50px，但是左外边界还是Y轴
   
   所以这就是为什么我们执行console.log(childObj.offsetLeft);的结果会得到100，因为子元素的左边界与父元素左边界之间的偏移为100px。

注意：对于bottom,top,right也是同样的道理