问题描述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style>.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;} </style><body><div class="a"><p>123</p></div><div class="b"><p>456</p></div></body></html>不过不知道为什么class为b的div 已经设置了position：relitive;为什么p{position:absolute;top:0px;left:0px;}定义了之后<P>没有显示在左上角呢。运行结果如图： 问题补充：asyty 写道
解决方案
我之前用chrome浏览器看了下代码，发现p标签默认有个margin-top高度的，和父标签有1em的高度距离，给p加上margin-top:0px;试试<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style>.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; /* 加上这句*/}</style><body><div class="a"><p>123</p></div><div class="b"><p>456</p></div></body></html>
解决方案二：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style>.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;}</style><body><div class="a"><p>123</p></div><div class="b"><p>456</p></div></body></html>
解决方案三：
敢不敢把div.b{ position:relative; 改成position:absolute;