HTML5小白分享（二）

逆战班技术汇总（二）

逆战班技术汇总（二）
定位（相对定位/绝对定位）：
通俗的说就是设置元素在页面中的位置，他是可以实现元素之间的层叠关系的。HTML5中常见的定位属性有以下几点：
1.position:static;（默认值，没有定位）
2.position:relative;（相对定位：相对于当前元素自身进行偏移，不能独立存在。不使元素脱离文档流，空间继续保留，如果没有定义偏移值，那么对元素本身没有影响。）
例：初始设置绿色块位于红色块水平居中；


当我们想自定义绿色块的位置：向下走100px，向右走50px；

注意看定义的属性偏移值，它是跟绿色块位移的方向是相反的（或者是可以写成top:100px;right:50px;），因为是以自身为参照物，所以位移的属性值可以是负数。
3.position:absolute;（绝对定位：默认下是以可是窗口页面进行定位，使元素脱离文档流，但是如果定义祖先元素（position:relative;），那么就是相对于祖先元素进行偏移）
还是以上面为例子，让绿色块相对于红色块进行偏移。

由此可见绿色块是完全相对于红色块向下偏移了100px，向右偏移了50px
前提是绿色块是包含在红色块内的，红色块相当于就是绿色块的祖元素，可以进行相对定位，这种相对运用的较多。