相对定位、绝对定位和固定定位

1. 相对定位

定位有三种：相对定位，绝对定位、固定定位。

相对定位：

position：relative

left：100px；

top：50px；

绝对定位：

position：absolute；

left：100px；

top：40px；

固定定位：

position：fixed；

left：100px；

top：40px；

1.1 认识相对定位

相对定位就是微调元素位置。让元素相对自己原来的位置，进行位置调整。

position：relative（声明自己要进行相对定位）

left：100px；（相对于现在的位置向右移动100px）

top：50px；（相对于现在的位置向下移动100px）

特点：相对位置不脱标，真实位置还在原来的地方，只是自己的“影子”移动了。

用途：相对定位有坑，所以一般不用于“压盖”效果。页面中的两个常用作用：

1）微调元素；

2）做绝对定位的参考。

1.2 相对定位的定位值

用left、right来描述盒子右、左的移动

用top、bottom来描述盒子的上、下移动

2.绝对定位

绝对定位比相对定位更灵活。

2.1 绝对定位脱标 

绝对定位的盒子是脱离标准文档流的。所以，所有标准文档流的性质，绝对定位之后都不遵守了。

绝对定位之后标签就不区分所谓的行内、块级元素了，不需要display来转化就可以设置宽高。

span{

position: absolute;

top: 100px;

left: 100px;

width: 100px;

height: 100px;

background-color: pink;

}

2.2 绝对定位的参考点

绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角：

图1

如果用bottom描述，那么就是浏览器首屏窗口尺寸对应页面的左下角：

图2

面试题：

注意：用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。

图3

2.3 以盒子为参考点

一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素为参考点。

图4

规律：要听最近的已经定位的祖先元素的

图5

上述例子采用相对定位作为参考点，但是不一定要相对定位才可以作为参考点，任何定位，都可以作为参考点。

参考种类：子绝父绝、子绝父相、子绝父固，都是可以给后代定位的。是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。

● 绝对定位的儿子，无视参考的那个盒子的padding。

下图中，绿色部分是div的padding，蓝色部分是div的内容区域。那么此时，div相对定位，p绝对定位。p将无视父亲的padding，在border内侧为参考点，进行定位：

2.4 绝对定位盒子居中

绝对定位之后，所有标准流的规则都不再适用。所以要使绝对定位的盒子居中不能用margin：0 auto；

而是：

width：600px；

height：60px；

position：absolute；

left：50％；

top：0；

margin-left：-300px；（宽度的一半）

3.固定定位

固定定位就是相对浏览器窗口定位，不管本页面如何滚动，这个盒子显示的位置不变。（固定定位脱标）一般用于制作导航条。

4.z-index

●z-index值表示谁压着谁。数值大的压盖住数值小的。

● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

●z-index值没有单位，就是一个正整数。默认的z-index值是0。

● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

● 从父现象：父亲怂了，儿子再牛逼也没用。