定位相关知识

定位相关
定位的组成：实际就是摆盒子 按照定位的方式移动盒子
定位=定位模式+边偏移

1、定位模式
通过position属性来设置

static 静态定位 默认的定位模式，按照标准流特性摆放位子，没有边偏移

relative 相对定位 典型的应用，就是给绝对定位当爹
1、移动位置的时候，相对于原来位置来说。
2、原来的位置继续占有，不脱标，继续保留原来位置

absolute 绝对定位 在移动位置的时候，相对于他的祖先元素来说的
1、如果没有祖先元素或者祖先元素没有定位，以浏览器为准对齐
2、如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位元素为参考点移动位置
3、脱标，不保留原来位置

fixed 固定定位 固定于浏览器可视区的位置。可以在浏览器页面滚动时元素的位置不会改变
1、以浏览器的可视窗口为参照点移动元素
a.和父元素 没有任何关系
b.不随着滚动条的滚动而滚动
2、不占有原来的位置
固定定位也是脱标的，可以看作是一种特殊的绝对定位。
3.小技巧：固定到版心的右侧位置
小算法
a.先让固定定位的盒子left50%，走到浏览器可视区的一半位置
b.让固定定位的盒子利用margin走版心盒子的一半

sticky 粘性定位 可以被认为相对定位和固定定位的结合
1、以浏览器的可视窗口为参照点移动元素
2、占有原先的定位
3、必须添加边偏移才有效。

2、边偏移
定位的盒子移动的最终位置，这四个属性只能在定位中使用，标准流和浮动流都不能使用
top left right bottom
实例：
top：80px

 

3.定位的堆叠顺序
语法： 选择器{z-index:1;}
可以用z-index来控制盒子的前后次序
数值可以是正整数，负整数 0 默认是auto 数值越大盒子越靠上
如果数值相同，后来者居上
数字后面不要加单位
只有定位的盒子才有这个属性

拓展
1.绝对定位的盒子居中：加了绝对定位的盒子不能通过margin：0 auto 水平居中。
a.left走50% 父容器的一半
b.margin负值 往左边走自己盒子的一半

2.定位的特殊特性
a.行内元素加了据对或者固定定位，可以直接设置高度和宽度
b.块级元素加了绝对或者固定定位，如果不给宽高，默认大小是内容的大小

3.脱标的盒子不会触发外边距合并

4.绝对定位 固定定位会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但不会压住下面标准流盒子里的文字（图片）
但是绝对定位，会压住标准流所有的内容，包含文字。