定位-position

 

当元素发生重叠的时候需要用到定位。

position的值：absolute绝对定位

fixed：固定定位

Relative：相对定位

 1、设置了position之后，元素的位置并没有发生变化，但是元素飞起来了，（不存在垂直方向外边距合并的问题了）

2、要发生位置的变化，需要设置top/right/bottom/left四个方向的值（只能是大小，不能使用有方向的词），这些样式仅仅针对定位元素起作用。

3.1、参照物 最近的含有position样式的父元素，否则会是整个浏览器窗体（body）

3.2、relative的参照物是自己原来在文档流中的位置。

3.3 （fixed）固定定位的参照物只可能是浏览器的窗体（body）

4.1、absolute脱离文档流，原来文档流中的位置会被其他仍然在文档流中的元素自动填满，该效果与浮动类似。

4.2、relative脱离文档流，但是会在文档流中留下一个分身的位置

5、当有元素发生重叠时，用z-index样式来区分层级，数字越大层级越高。

 

注意：1、给需要重叠的元素适用定位

2、给元素适用absolute绝对定位必须准确找到参照物。

3、Absolute的参照物如果不是body的时候，一般情况下给父元素加position：relative；

4、top/right/bottom/left/i-index这些样式，只对定义元素产生作用。