css相对位置绝对位置问题

Question

直接上图

css代码

html代码

想知道这个img 的top: -20px; left: -90px是相对于header的margin边缘 还是相对于content
我感觉是相对于content 但是不是很确定
不知道我有没有表述清楚~
谢谢拉

Answer 1

上面几个答案都是错的，除了贴图的那位
（然而看答案下的评论，貌似好像他也并不知道图里表达的到底是啥意思 = =）

不是margin也不是content，而是padding边（padding edge）

这里.badge的top是-20px,.badge就在header的padding边的基础上，往上移了20像素
如图

我把.badge的top改成0px,图片就紧贴着header的顶部padding了

.badge的top改成20px:

这一块蛮复杂的，几句话解释不清，
绝对定位元素的显示效果是根据它的包含块来的，
怎么个根据法，看这两篇文档：
http://www.ayqy.net/doc/css2-...
http://www.ayqy.net/doc/css2-...
啥叫包含块，看这个：
http://www.ayqy.net/doc/css2-...

Answer 2

absolute 相对于已定位祖先元素的padding box（包含content和padding）产生偏移，如果没有写top、left，默认是在content位置

Answer 3

absolute参照的是离他最近的设置了absolute或者relative属性的元素z作为参照点，你这个地方img参照的是header

Answer 4

相当于content

Answer 5

父元素position: relative;，子元素position: absolute;的这种常用的定位，两个元素各自使用的参考边如下图：

图中蓝色的是子元素，红色的是父元素（容器元素）。

其中edge的在盒模型的位置请参考w3c的这张图：

Answer 6

content