设置成绝对定位，为什么span里的文字跑到上面了，不应该在盒子的下面吗？
来源：13-7 相对于自己的位置-层模型之相对定位
白衣2
2016-04-20 12:39
设置成绝对定位，为什么span里的文字跑到上面了，不应该在盒子的下面吗？
写回答
关注
3回答
-
- 小布ever
- 2016-04-20 16:43:51
绝对定位的含义是：将元素从文档流中拖出来，那么相当于此时文档流中只剩下span里面的文字了，那么这段文字自然就跑到最前面去了，而拖出来的盒子变成独立定位了，文字和盒子都是相对独立。
新手作答，不知道这样理解对不对。
-
- 忆_卿
- 2016-04-22 15:14:03
在页面显示内容时，<body>里的内容在页面的显示顺序依然是从上而下，但是设置为绝对定位的时候，元素会从文档流中脱离，这个时候<span>会先显示出来最后才显示被绝对定位的元素。
-
- 白衣2
- 2016-04-20 12:41:35
<!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>
初识HTML(5)+CSS(3)-升级版
HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义
1225297 学习 · 18230 问题
相似问题