效果图如下 符合文档流的基本顺序:
第二种情况 取消注释 position:relative
效果图如下:发现div根据设置的left和top发生了偏移 但是span 还是为什么span的位置这么奇怪呢?
因为设置 relative 并不会脱离文档流.举例例子:
设置relative你可以想象一下，这个div是个飞机，从停机坪飞起来，飞到别的地方去了。但是。。这个停机坪还是要给他留着的，否则飞不回来了
虽然div 设置了left和top的偏移,但是它原来的位置还是进行了保留.等待它飞回的那一刻.而span则保持原来的状态没有发生变化.
第三种情况:设置position : absolute
效果图如下: 这里设置absolute ,发现span 跑到文档的开始位置了.
因为设置absolute 会使div脱离文档流.两个保持这样的位置还有就是div 设置top和left的偏移.
| | |
----|------|-----|
static | 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。|
relative| 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。|
absolute| 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。 |
fixed|位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。|
另外:
材料/工具：电脑、CSS3、HTML5、HBuilder、浏览器、截图工具
1、双击打开HBuilder编辑工具，新建静态页面position.html，修改title标签内的内容。
2、在<body></body>标签元素内插入一个<div></div>标签，设置其id属性值为pos。
3、利用ID选择器设置div元素宽度和高度都为300px，背景色为#666666，position为absolute。
4、保存代码并预览界面，发现页面展示的正方形边框在左上角。
5、修改top、left、margin和padding，让div元素垂直居中。
6、设置div标签元素border-radius和background渐变属性即可。
可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {position: relative
left: 30px
top: 20px
}
