GIF动态图教学-CSS3语言4-标记定位方式(实例)

1、标记的定位相当于就是在移动位置。定位有2种方式，一种是【相对定位】，一种是【绝对定位】。如图操作，position属性值为relative;表示相对定位，根据自身上下文的位置变化而变化。如图操作，把h1标记向下移动50像素，和右移50像素。top:50px;的意思是距离顶部50像素，也就是相当于向下移动50像素，以此类推。

2、如图操作，继续对div标记进行相对定位，可以得出移动的方式确实是根据自身上下文的位置进行移动。

3、我们来验证下是否是向下移动50像素和右移50像素，删除top值和left值，用截图工具的起点往终点移动，得出宽度确实50像素，高度也是50像素。

4、position属性值设置为absolute;，表示绝对定位。绝对定位可以灵活地设置元素的位置，也不占用"位置"。如图所示，把p标记设置为绝对定位，脱离了div内部位置，看绿色边框并没有再包括p标记的内容。而绝对定位会把宽高设置为根据内容的多少而定，看蓝色边框。

5、验证是不是不再占用位置，如图操作把h1标记设置成绝对定位方式，可以看到div标记往上移动了。

6、设置【绝对定位】的top值，距离顶部的值。现在距离顶部的位置是根据body标记而定。为什么这么说？请看下一步解释。

7、首先设置div标记【相对定位】，这时距离的顶部位置根据div标记而定。上一步是根据body标记而定，这是因为【绝对定位】是有参照物，这个参照物就是标记的父标记，因为上一步父标记div并没有设置【相对定位】，那么如果一个标记的所有父标记都没有设置【相对定位】，那这个标记的参照物就是根标记body。如果一个标记的父标记有设置【相对定位】，那么这个父标记以此类推，还有一个标记有很多父标记层级，哪离最近的父标记就是参照物。例如：结构div-p-span。span标记设置绝对定位，先看父标记p有没有设置相对定位，如果有p就是参照物，没有继续往上找，看div标记有没有设置相对定位。

8、绝对定位后一个标记的宽高会发生变化，如果需要宽高设置即可，如图所示。

9、绝对定位后文字和背景都会重叠，如图所示，div标记绝对定位后，span标记的内容被遮住了，该怎么办？绝对定位的标记可以设置z-index值属性值为-1，如图操作。z-index表示显示优先级，-1表示降1级，-2表示降2级，以此类推，默认为0级。如果z-index为2表示升2级，以此类推。