设置成绝对定位，为什么span里的文字跑到上面了，不应该在盒子的下面吗？
绝对定位的含义是：将元素从文档流中拖出来，那么相当于此时文档流中只剩下span里面的文字了，那么这段文字自然就跑到最前面去了，而拖出来的盒子变成独立定位了，文字和盒子都是相对独立。
新手作答，不知道这样理解对不对。
在页面显示内容时，<body>里的内容在页面的显示顺序依然是从上而下，但是设置为绝对定位的时候，元素会从文档流中脱离，这个时候<span>会先显示出来最后才显示被绝对定位的元素。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
#div1{
width:200px;
height:200px;
border:2px red solid;
//position:relative;
position:absolute;
left:100px;
top:50px;
}
</style>
</head>
<body>
<div id="div1"></div>
<span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
</html>