CSS定位 -- 课件

课程目标
1、 css定位方式很多，学习后能自己根据需求自行选择。
2、 层叠模式 z-index
3、 绝对定位和相对定位


课程安排
1、 什么是定位，定位有几种方式？
2、 相对定位 示例
3、 绝对定位 示例
4、 固定定位 示例
5、 其他 浮动对定位有什么影响

定位
Position：relative相对 absolute绝对 static无定位 fixed固定定位

绝对定位：
1、相对已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么他的位置就相对于最近的包含块（**body） absolute绝对
2、破坏了标准的文档流

相对定位
1、 相对定位的偏移量参照物就是元素本身。
2、 还是标准文档流，没有破坏文档流。

1、绝对定位和浮动的关系
示例

2、相对定位和浮动的关系
示例

3、z-index的使用
z-index决定谁在前面显示，谁在后面显示，参数值：设置数字，数字上不封顶。


数值不适宜设置的过大，没意义，但是也不适合设置的过小。因为以后页面的DIV很多，可以让他们一起重叠显示；

固定定位
概念：相对于浏览器窗口定位
Position：fixed






z-index

总结：
1、 相对定位参照物是本身，绝对定位参照物是最近的父元素
2、 相对定位是不会破坏文档流，而绝对定位是破坏文档流
3、 搭档起来使用。，一般是相对定位作为父级的单位，而绝对定位
是作为子级单位使用**的。