最近去培训问到关于脱离标准层的问题,特意去找了以下相关内容.了解到如下:
定位：一般父级用相对定位，子级用绝对定位
1.相对定位：position：relative
2.绝对定位：position：absolute
3.固定定位：position：fixed
默认static没有定位
偏移量：left和
top比
right和
bottom的优先级要高
相对定位：
相对于自身原始位置进行定位
原点在自身左上角
不脱离文档流
特性：
1.不影响元素本身的特性
2.不使元素脱离文档流
3.提升层级
4.无法触发BFC
5.针对自己本身进行定位
绝对定位：
以定位父级为原点进行定位
会脱离文档流
如果没有定位父级以document文档定位
温馨提示：绝对定位即使没有初始值，也一定要设置值
left：0px；top：0px；
特性：
1.会使元素完全脱离文档
2.内容撑开宽度和高度
3.使元素支持所有的CSS样式
4.提升层级
5.绝对定位要和相对定位配合使用
6.如果有定位父级，针对定位父级发生偏移
如果没有，针对document进行偏移
7.如果绝对定位的子级有浮动，可以省略清浮动的操作
固定定位
以窗口左上角为原点定位，定位之后相对于窗口的位置始终不变
应用场景：悬浮在网页两边的广告
脱离文档流
温馨提示：IE6不支持固定定位
特性：
1.不兼容IE6
2.针对窗口进行定位
3.如果固定定位的子级有浮动，可以省略清浮动的操作
脱离文档流的两点影响
1.后面同父级元素会顶上来
2.父级会检测不到脱离文档流的元素，从而导致父级高度无法由内容撑开
定位层级设置
z-index：数值
数值越大，层级越高
层级关系
z-index负数<正常<float（和文档同级）<position<z-index正数
注意：z-index、left、top、right、bottom只对带有position属性（static除外）的元素有效
z-index,用来提升或降低层级关系