Css基础-定位position

css定位

重点：三种基本的定位(position)机制：普通流，浮动和绝对定位。
盒子模型
普通流
上左右下 ， 没有脱离文档流必定没有脱离文本流
普通流
定位的默认值static
默认按照普通流顺序排列的
opacity：透明度
怪异盒模型 box-sizing：border-box

偏移量 top：

相对定位：

position：relative
1：没有偏移量的时候再原来位置不变
2：有偏移量时 没有脱离文档流也不脱离文本流
相对定位根据原来自身位置定位

绝对定位：

position：absolute；
脱离文档流也脱离文本流
绝对定位父级没有定位时，根据窗口定位
绝对定位父级有定位时，根据父级定位
固定定位：
position：fixed
脱离文档流也脱离文本流
固定定位永远根据窗口定位
黏性定位：
position：sticky
当没达到偏移量是是相对定位，达到偏移时是固定定位

选项卡思路：

1.分析结构 1个大的父级 2个子级(1个和一个子级）
第1个子级 4个或 a
2.设置父级对的div宽高
3.设置ul的位置和 li 标签的位置
4.通过定位将4个照片的叠放一起，调整优先级 z-index属性要求元素使用了定位
（父级使用相对定位，子类2使用固定定位）