进击的前端之CSS的定位

定位

• 可以让元素自由的摆放在网页的任意位置
• 一般用于盒子之间的层叠情况

基本使用

定位属性------position: static/relative/absolute/fixed

定位偏移------top/right/left/bottom: 1px

静态定位

position：static

静态定位就是默认值，不能进行方位属性的移动

相对定位

position: relative

相对于自己之前的位置移动，在页面中占位置，没有脱标

绝对定位

position: absolute

相对于非静态定位的父元素进行定位移动，在页面中不占位置，有脱标

固定定位

position: fixed

相对于浏览器可视区域进行定位移动，在页面中不占位置，有脱标

子绝父相

让子元素相对于父元素进行移动

子元素是绝对定位，父元素是相对定位。

层级问题

定位>浮动>默认值（标准流）

相对、绝对、固定默认层级相同，元素层级越高，会覆盖元素，所以引出了z-index属性

z-index属性的数字越大，层级则越高。