CSS定位
CSS 定位机制
CSS中一共有三种基本定位机制：普通流、浮动、绝对定位。
如果不进行专门指定，所有的标签都在普通流中定位。
块级元素从上到下一个接一个的排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距来调整它们之间的间距。
position属性
通过position属性，我们可以选择4种不同类型的定位，这会影响元素框生成的方式。
包括4个属性值：static、relative、absolute、fixed
static : 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。 relative : 元素框偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍然保留。 absoulte : 元素框从文档流中完全删除，并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭，就好像元素不存在一样。元素定位后生成一个块元素，而不论原来它在正常文档流中生成何种类型的框。 fixed : 元素框的表现类似将position设置为absoulte，不过其包含块是浏览器窗口。
代码展示
position: static;
static是position属性的默认值，无特殊定位。均为正常定位。
position: reletive;
HTML代码:
我是p1
我是p2
我是p3
CSS代码:
.p1 {
position: relative;
left: 30px;
}
.p2 {
position: relative;
right: 30px;
}
效果图：
解释：<喎?/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPjwvcD4NCjxjb2RlPnBvc2l0aW9uOiByZWxhdGl2ZTs8L2NvZGU+ss6/vLXEysfX1Ly61K3AtLXDzrvWw6GjILXa0rvQ0M7E19bJ6NbDcG9zdGlvbs6qcmVsYXRpdmWjrNXisqKyu7vh1Oyzycqyw7S3tNOmo6y1q8rHztLDx7u5uPhwMcno1sPByzxjb2RlPmxlZnQ6IDMwcHg7PC9jb2RlPqOs1eK+zbvhyrnUqsvYvuDA69fzsuCy+sn6MzBweLXEvOS+4KGjIM2s0fmjrLXatv7Q0M7E19bJ6NbDPGNvZGU+cmlnaHQ6IDMwcHg8L2NvZGU+o6y74cq51KrL2L7gwOvT0rLgMzBweLXEvOS+4KOsvs2y+sn6wcvF3LW9xsHEu83iw+a1xMfpv/YgtdrI/be9w7vT0Nf2yM66zrSmwO2jrNX9s6PP1Mq+INei0uKjrNK7tqjSqsno1sO6wzxjb2RlPnBvc2l0aW9uOiByZWxhdGl2ZTs8L2NvZGU+o6y38dTyPGNvZGU+dG9wPC9jb2RlPqGiPGNvZGU+cmlnaHQ8L2NvZGU+oaI8Y29kZT5ib3R0b208L2NvZGU+oaI8Y29kZT5sZWZ0PC9jb2RlPsrHsrvG8Nf308O1xKGjDQo8aDMgaWQ9"position-absoulte">position: absoulte;
HTML代码: CSS代码: 没有设置CSS样式的样子： 设置了CSS样式后的样子： 解释： HTML代码: CSS代码: 效果展示： 解释： 关于界面排布优先级的问题 z-index 关于界面元素框偏移
啦啦啦啦啦
我是h1大标题
.h1 {
position: absolute;
top: 100px;
left: 100px;
}
postion: absolute;参考的是自身的包含块，也就是自己的父视图 当设置了position: absolute;属性之后，标签的位置就变得绝对了。这个时候我们设置top、right、bottom、left其中的任何一个属性，都可以设置标签的位置。 注意，一定要设置好position: absolute;，否则top、right、bottom、left是不起作用的。
position: fixed;
我是p one 我是p two
.one {
position: fixed;
top: 100px;
left: 30px;
}
.two {
position: fixed;
top: 50px;
right: 30px;
}
position: fixed;参考系是浏览器的窗口 当给标签设置了position: fixed;属性之后，这些标签就只会相对于浏览器窗口进行位置的设定，忽略网页的滚动 同样，如果不设置postion: fixed;属性，而是直接设置top、right、bottom、left都不会起作用
1 2 3
偏移前：
偏移后：
