CSS——定位

定位有三种，分别是：相对定位、绝对定位、固定定位。相对定位不脱离标准文档流，绝对定位和固定定位使元素脱离标准文档流。

相对定位：

position:relative;

绝对定位：

position:absolute;

固定定位：

position:fixed;

1、相对定位

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

例如：

position:relative;  先声明自己要进行相对定位了 left:100px;           然后调整位置，向右移动100px，即表示调整位置后的盒子向左移动100px，是原来盒子位置。 top:100px;           然后进行调整，向下移动100px，即表示调整位置后的盒子向上移动100px，是原来盒子位置。

相对定位不脱标，真实位置是还是原来盒子所在的位置，只不过影子出去了，可以到处飘。

相对定位的定位值

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

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

2、绝对定位

（1）绝对定位的盒子，脱离标准文档流。所以绝对定位之后，标签就不区分行内元素、块级元素了，不需要display:block;就可以设置宽、高：

1  span{ 2  position: absolute; 3  top: 200px; 4  left: 200px; 5  width: 100px; 6  height: 100px; 7  background-color: green; 8  }

 （2）绝对定位的 参考点

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

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

（3）以盒子为参考点

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

● 要以离自己最近的已经定位的祖先元素为参考点：

1  <div class="box1">   →  相对定位 2  <div class="box2">  →  没有定位 3  <p></p>   → 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素 4  </div> 5  </div>

1  <div class="box1">   →  相对定位 2  <div class="box2">  → 相对定位 3  <p></p>   → 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素 4  </div> 1  </div>

 ● 不一定是相对定位，任何定位，都可以作为参考点

1  <div>  → 绝对定位 2  <p></p>  → 绝对定位，将以div作为参考点。因为父亲定位了。 3  </div>

 一般采用“子绝父相”，即父辈元素相对定位，子辈元素绝对定位的方式，这样父辈没有脱离标准流，脱离标准流的子辈就可以在父辈范围内移动，如果都绝对定位，盒子都脱离了标准流，页面容易不稳固。

● 绝对定位的儿子，无视参考的那个定位的父辈盒子的padding。就是说，以border内侧作为参考点，进行定位。

（4）绝对定位的盒子居中

绝对定位后，脱离标准流。所以 margin:0 auto; 失效了。

居中办法如下：

  width: 400px;

  height: 60px;

  position: absolute;

  left: 50%;

  top: 0;

  margin-left: -200px;   → 负的宽度的一半

非常简单，当做公式记忆下来。就是left:50%; margin-left:负的宽度的一半。

3、固定定位

 

固定定位，就是相对浏览器窗口定位。页面如何滚动，盒子显示的位置都不变。固定定位脱标！

IE6不兼容。

4、z-index值

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

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

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

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

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