定位
静态定位 position: static
相对定位 position: relative
绝对定位 position: absolute 脱标 参考点
子绝父相
让绝对定位的盒子水平居中和垂直居中
固定定位 position: fixed
参考点 浏览器左上角
固定定位的元素脱标不占有位置
兼容性 ie6低版本不支持固定定位
z-index
当对多个元素设置定位时,重叠的定位元素可以通过z-index调整堆叠顺序 其值可以为0 正数 负数
特点 1 z-index默认值为0 取值越大 定位元素在层叠元素上越局上
2 z-index取值一样，后来居上
3 z-index值不能加单位
4 只有定位元素才有该属性，其余如浮动等都无此属性
04z-index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 200px; height: 200px; position: absolute; top: 0; left: 0; } div:first-child { background-color: red; /* z-index: 1; */ } div:nth-child(2) { width: 300px; top: 60px; left: 20px; background-color: purple; /* z-index: 2; */ } div:last-child { width: 400px; left: 30px; top: 40px; background-color: orange; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
