精确获取元素样式值 - 位置
写这篇文章我很矛盾，因为如果非常规范的写代码，这篇文章说的问题根本就不存在。因为 top right / bottom left 一般都会手动设置，如果不小心结果是 auto，那绝对是您忘了赋值了。
比如为了绝对定位到父级元素（offsetParent）的左上角，有时候我们会偷懒写成下面这样：
position: absolute;
我们以为浏览器默认会填上 left: 0; top: 0; 没错，大部分浏览器都会实现同样的效果，但是却不是 0px，而是 auto，这时候问题就来了，而且我曾经在Firefox x.0 中发现，这样简写居然不是定位到左上角，当然最新的版本已经解决了这个问题。
首先说明一下，本文所写全部针对绝对定位，因为 static relative fixed 没有动态取值的必要，当然如果非要考虑周全，就是下面这样：
static: auto -> 0px
relative: auto -> 0px
fixed: auto -> 元素相对于浏览器窗口的位置
我真心觉得没必要考虑这三位，所以我的处理方式是，非 'absolute' 碰到 auto 统一转为 0px
下面给几个绝对定位（top / right / bottom / left 全是 auto）的例子：
1. 默认
#a {
background: red;
border: 10px solid blue;
width: 500px;
height: 500px;
position: relative;
}
#b {
background: green;
width: 100px;
height: 100px;
position: absolute;
}
这时 left 和 top 等同于 0px
2. 父元素设置padding
#a {
background: red;
border: 10px solid blue;
width: 500px;
height: 500px;
padding: 50px;
position: relative;
}
#b {
background: green;
width: 100px;
height: 100px;
position: absolute;
}
这时 left 和 top 等同于 父元素的 padding-left 和 padding-top
3. 父元素没设置 padding，子元素设置 margin
#a {
background: red;
border: 10px solid blue;
width: 500px;
height: 500px;
position: relative;
}
#b {
background: green;
width: 100px;
height: 100px;
position: absolute;
margin: 50px;
}
这时 left 和 top 等同于 元素的 margin-left 和 margin-top
4. 最后给一个特殊例子，元素设置 left: 0; top: 0; 并且 设置margin，而父元素设置 padding
#a {
background: red;
border: 10px solid blue;
width: 500px;
height: 500px;
position: relative;
padding: 50px;
}
#b {
background: green;
border: 10px solid yellow;
width: 100px;
height: 100px;
margin: 50px;
position: absolute;
left: 0;
top: 0;
}
这时，即使设置了 left 和 top，还是被自己的 margin 影响了
综上，我们不用考虑目标元素的盒模型，只管父元素（offsetParent）的 padding，所以的当位置为 auto 时，转换公式如下：
位置(left) = 父元素padding(left);