【CSS学习第六篇】

CSS学习第六篇

[1. 初识定位](#1. 初识定位)
- [1.1 为什么需要定位](#1.1 为什么需要定位)
- [1.2 定位的组成](#1.2 定位的组成)
[2. 定位的分类](#2. 定位的分类)
- [2.1 相对定位](#2.1 相对定位)
- [2.2 绝对定位](#2.2 绝对定位)
- - [2.2.1 绝对定位---没有父级或者父级无定位情况](#2.2.1 绝对定位—没有父级或者父级无定位情况)
  - [2.2.2 绝对定位---父级有定位情况](#2.2.2 绝对定位—父级有定位情况)
  - [2.2.3 绝对定位脱标的不占有原来位置](#2.2.3 绝对定位脱标的不占有原来位置)
  - [2.2.4 子绝父相的由来](#2.2.4 子绝父相的由来)
- [2.3 固定定位](#2.3 固定定位)
- [2.4 粘性定位](#2.4 粘性定位)
[3. 定位的叠放顺序](#3. 定位的叠放顺序)
[4. 定位的拓展](#4. 定位的拓展)
- [4.1 绝对定位的盒子居中算法](#4.1 绝对定位的盒子居中算法)
- [4.2 定位的特殊特性](#4.2 定位的特殊特性)
- [4.3 脱标的盒子不会触发外边距塌陷](#4.3 脱标的盒子不会触发外边距塌陷)
- [4.4 浮动元素不会压住标准流的文字定位会](#4.4 浮动元素不会压住标准流的文字定位会)
[5. 网页布局总结](#5. 网页布局总结)
[6. 元素的显示与隐藏](#6. 元素的显示与隐藏)
- [6.1 display显示隐藏元素](#6.1 display显示隐藏元素)
- [6.2 visibility显示隐藏元素](#6.2 visibility显示隐藏元素)
- [6.3 overflow溢出显示隐藏](#6.3 overflow溢出显示隐藏)

1. 初识定位

1.1 为什么需要定位

1.2 定位的组成

2. 定位的分类

2.1 相对定位

（1）静态定位

（2）相对定位

原来的在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（如下文所示）
与父元素/浏览器无关，是以自己原来的位置为基准在移动的，并且原来的盒子还是占有位置的。

下面的盒子不会上去，还是在原来的位置。

2.2 绝对定位

2.2.1 绝对定位---没有父级或者父级无定位情况

（1）绝对定位→没有父级或者父级定位情况

2.2.2 绝对定位---父级有定位情况

（2）绝对定位---父级有定位情况

看最近一级有定位的祖先！（强调有定位 ）

2.2.3 绝对定位脱标的不占有原来位置

绝对定位脱标的不占有原来位置

（绝对定位是不占有位置的）

2.2.4 子绝父相的由来

先来思考两个问题：

问题解答过程：

为什么呢？请看下文。

轮播图的左右按钮用什么定住呢？

浮动？浮动只会影响后面的盒子，如果图片的先插入的，再加入左右按钮这两个盒子，则这两个盒子只会在下面显示。

而且，也不止需要两个盒子，如果是加了浮动，则三个盒子则在一行显示。

此时就可以使用绝对定位，因为绝对定位不占有位置，可以在盒子内自由地摆放位置。

因此，就有以下结论（子绝的由来）

并且，父盒子一定要加定位。

但是，父盒子不能加绝对定位，因为绝对定位是不占有位置的，其他地方的盒子会飘到父盒子里去。

因此，只能使用相对定位了。

总结：