<!DOCTYPE HTML><html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"><title>relative样式</title><styletype="text/css">#div1{width:200px;height:200px;border:2px red solid;position:relative;left:100px;top:50px;}</style></head><body><divid="div1"></div><span>偏移前的位置还保留不动,覆盖不了前面的div没有偏移前的位置</span></body></body></html>
<!DOCTYPE HTML><html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"><title>相对参照元素进行定位</title><styletype="text/css">div{border:2px red solid;}#box1{width:200px;height:200px;position:relative;}#box2{position:absolute;top:20px;left:30px;}</style></head><body><divid="box1"><divid="box2">相对参照元素进行定位</div></div></body></html>
<!DOCTYPE HTML><html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"><title>relative样式</title><styletype="text/css">#div1{width:200px;height:200px;border:2px red solid;position:absolute;left:100px;top:50px;}</style></head><body><divid="div1"></div><div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div><div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div><div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div><div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div><div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div></body></html>