定位的应用场景:
1 解决盒子之间的层叠(叠加)问题,可以层叠到其它盒子上面
2 页面滚动,盒子固定在页面某个位置不动.
定位的使用步骤:
1 设置定位的方式
2 设置偏移值
定位的分类及语法:
1.静态定位(类似标准流):
position: static; 特点: 1 静态定位就是普通的标准流 2 静态定位设置偏移值无效.
2.相对定位
position: relative; 特点: 1 需要配合方位属性来移动位置 2 想对于自身原来的位置进行移动 3 在页面中占位置-没有脱标
3.绝对定位
position: absolute; 特点: 1 需要配合方位属性来移动位置 2 祖先元素如果没有定位,默认相对于浏览器进行移动;祖先元素有定位,相对于最近一级带有定位的祖先元素移动位置. 3 在页面中不占位置-已经脱标
4.子绝父相(使用重点)
子绝父相: 子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小.
子绝父绝: 实际开发中在子绝父相的时候,发现父元素有绝对定位,此时父元素里面的孩子直接子绝即可.
5.固定定位
position: fixed; 特点: 1 需要配合方位属性来移动位置 2 相对于浏览器的可视区域进行移动位置 3 不占位置-脱标
定位特殊性:
行内元素加了绝对/固定定位可以设置宽高(类似display:inline-block/block 效果) 块级元素加了绝对/固定定位,如果不给宽高,宽高由内容撑开 嵌套块级元素加了绝对/固定定位,不会有塌陷问题.
元素层级:
不同布局方式元素的层级关系：标准流 <浮动 <定位
定位元素之间的层级关系相同(相对定位 绝对定位 固定定位)
(默认情况下 定位的盒子,后来者居上)
z-index属性可以修改定位元素之间的层级关系
z-index: 数字(默认值是auto );
z-index属性的属性值千万不要加单位
数字越大,层级越高.只有定位的盒子才有 z-index属性
