css第七天 定位

通过position属性设置

        relative：相对定位

        absolute：绝对定位

        fixed：固定定位

        static：静态定位（渲染在文档流中，默认值）

相对定位

相对定位就是相对于元素原有位置的定位。

注意

• 这种定位的元素并没有脱离文档流，因此对于它的位置设定不会影响其它兄弟元素

• 相当于占了一个坑，但是人不在这里

• 一旦元素设置position（除了static其余三个值均可）会激活四个属性；top，left，right，bottom

• 这四个属性可以定义位置的偏移量

相当于占了一个坑，但是人不在这里

一旦元素设置position（除了static其余三个值均可）会激活四个属性；top，left，right，bottom

这四个属性可以定义位置的偏移量

注意：这里的正负值表示

• 正值：向中心方向偏移要设置正值

• 负值：向边缘方向偏移要设置负值

注意：在标准的 css 坐标系中，

• 水平方向：向右为正，向左为负，

• 垂直方向：向下为正，向上为负

优先级：

left和right都能改变水平方向的偏移量，但是left的优先级要高于right

top和bottom都能改变垂直方向的偏移量，但是top的优先级要高于bottom

所以工作中，要尽量设置 top 和 left

应用

• 由于相对定位，使元素并未脱离文档流，

• 但是如果设这类元素的偏移量的设置，不会影响他的兄弟元素（因为偏移量的设置不会改变容器的尺寸）

  如：更改文字渲染位置，更改图标位置

• 有时候还会用相对定位来辅助绝对定位。

---

---

绝对定位

绝对定位

注：绝对定位跟相对定位不同，影响后面的兄弟元素

默认相对 初始位置窗口（html元素） 定位：

• 在相对定位中，相对于原有位置进行定位的

• 在绝对定位中，相对于html元素（窗口）定位的

注意

• 设置top的时候，根据初始位置窗口的顶边定位

• 设置bottom的时候，相对于初始位置窗口的底边定位

• left和right是相对于初始位置窗口的左右边定位的。

绝对定位影响宽高：在未设置盒子的宽度和高度的时候，我们可以通过绝对定位的偏移量：top，bottom，right, left来设置盒子的宽高，然而相对定位不可以

就近原则

嵌套的盒子设置了绝对定位，它会寻找离他最近的设置了定位的祖先元素（绝对定位，相对定位，固定定位），以此来确定定位的偏移量。 也就是说，此时不再

以body定位，而是相对设置了定位的祖先元素定位

定位顶点：绝对定位是相对于父元素的padding定点（包含padding）进行定位设置的。设置border会影响定位的结果

display：不论是行内元素，还是块元素，设置了绝对定位，display属性失效，此时特征有点类似inline-block，不论是块元素还是行内元素，都可以直接设置宽高

压盖现象：元素设置了绝对定位，此时会有压盖现象，后面的元素会显示在前面的元素上面

绝对定位居中

我们可以根据绝对定位的特性让元素居中

绝对定位是相对于元素左上角的一点进行定位的，我们可以将其设置成50%,此时该元素的左上角一点将在页面中心，我们通过margin向上和向左平移宽高的一

半，既可以实现元素的居中（兼容块元素和行内元素，绝对定位不会区分块元素和行内元素）

---

---

固定定位

固定定位也是脱离文档流的定位，跟绝对定位很像。

position: fixed; （IE6不支持，只能通过absolute模拟）

固定定位是相对于浏览器窗口的定位，

正是由于相对于浏览器窗口的定位，因此与父元素的定位无关，其特点

1. 定义相对于浏览器窗口，与父元素的定位无关

2. 脱离文档流，会影响兄弟元素（后面的兄弟元素会顶上来）

3. 不论是块元素，还是行内元素，一旦固定定位，可以直接设置宽高

4. display属性失效

5. 可以通过偏移量设置盒子的宽高（没有设置width或者height）

6. 优先级：left > right, top > bottom

7. 如果偏移量一旦设置了负值，那么盒子将移出视口，我们将看不到这部分盒子（所以在工作中，尽量不要设置负值）

---

---

遮盖

2.5 遮盖

一旦盒子设置了定位（相对定位，绝对定位，固定定位），就会产生遮盖的现象

遮盖就是指盒子被另一个盒子盖住，默认遮盖顺序有两个特点

1. 设置定位的盒子，会遮盖住没有定位的盒子（包括浮动的盒子）

2. 如果盒子都设置了定位，后面的盒子会遮盖住前面的盒子

z-index

默认情况下，如果盒子都设置了定位，遮盖的顺序是按照盒子创建的顺序遮盖的，后面的会遮盖住前面的

为了能够让盒子遮盖的顺序自定义，设置了定位的盒子会激活z-index属性，来设置盒子遮盖的顺序

z-index：属性值是一个数字（不要带单位），遮盖的顺序是由该属性值的大小决定的，其特点：

1. 只有设置了定位的盒子才激活z-index，因此定位的盒子可以设置z-index，没有定位盒子不

   能设置z-index(包括浮动的盒子)

2. z-index默认值是auto，可以看成是0，没有定位的盒子不能设置z-index，但是我们可以将其

   z-index看成0，如果z-index小于0，会渲染盒子（包括未定位的盒子）底部，只有大于等于0的时

   候，才会渲染在上面

3. 设置的z-index值越大，就会渲染在最前面，谁的大，谁在前面，注意：z-index属性值通常是

   整数

4. 如果盒子设置了相同的z-index，此时盒子会根据创建的顺序决定谁在前面，不论是正值还是

   负值，后创建的盒子渲染在最前面

5. 盒子的遮盖顺序不仅仅与自己的z-index相关，还与设置了定位的父盒子相关，父盒子z-index

   高的，不论子盒子z-index设置了多少，都会渲染在父盒子z-index低的子盒子的前面，这一现象我

   们称之为拼爹