html - css相对位置绝对位置问题

问题描述

问 题

直接上图

css代码

html代码

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

解决方案

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

不是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-...

这篇关于html - css相对位置绝对位置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！