css关于margin跟padding的问题

[code="java"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档
.a{ padding:100px; position:relative; background:#630;} p{background:url(bg_cover.gif) repeat-x; } div.b{ position:relative; background:#6CC; height:70px;/*还是那个问题,当b离开准备流的时候如果不设置height,div是没有内容显示的所以设置了height才可以呢*/ } .b p{ position:absolute; top:0px; left:0px; background:#C03;}

123

456


[/code]

不过不知道为什么class为b的div 已经设置了position:relitive;
为什么p{position:absolute;
top:0px;
left:0px;}定义了之后

没有显示在左上角呢。
运行结果如图:

我之前用chrome浏览器看了下代码,发现p标签默认有个margin-top高度的,和父标签有1em的高度距离,给p加上margin-top:0px;试试

[code="java"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档
.a{ padding-top:100px; position:relative; background:#630; } p{ background:url(bg_cover.gif) repeat-x; } div.b{ position:relative; background:#6CC; height:70px; } .b p{ position:absolute; top:0px; left:0px; background:#C03; margin-top:0px; /* 加上这句*/ }

123

456


[/code]

敢不敢把
[code="java"]
div.b{

    position:relative;  

[/code]

改成position:absolute;

[code="java"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档
.a{ padding-top:100px; position:relative; background:#630; } p{ background:url(bg_cover.gif) repeat-x; } div.b{ position:absolute; top:0px; left:0px; background:#6CC; height:70px; } .b p{ background:#C03; }

123

456



[/code]