【CSS学习第六篇】

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 子绝父相的由来

先来思考两个问题：

问题解答过程：

为什么呢？请看下文。

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

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

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

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

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

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

总结：

2.3 固定定位

（3）固定定位

固定定位小技巧—固定到版心右侧

固定定位不是基于浏览器的四个角来定位的，它还可以基于版心来定位。

2.4 粘性定位

（4）粘性定位

如下图，一开始跟着滚动条走，走到一定位置就固定了。




粘性定位兼容性特别差，并不常用。

3. 定位的叠放顺序

定位的叠放顺序

4. 定位的拓展

4.1 绝对定位的盒子居中算法

绝对定位的盒子居中算法：

水平 垂直 居中：

4.2 定位的特殊特性

定位特殊特性


（div是abcd，span是123）

4.3 脱标的盒子不会触发外边距塌陷

脱标的盒子不会触发外边距塌陷

4.4 浮动元素不会压住标准流的文字定位会

浮动元素不会压住标准流的文字，定位会

5. 网页布局总结

网页布局总结

6. 元素的显示与隐藏

6.1 display显示隐藏元素

元素的显示与隐藏

（1）display属性

6.2 visibility显示隐藏元素

（2）visibility

6.3 overflow溢出显示隐藏

（3）overflow
→对溢出的部分进行显示和隐藏

例如：

1.hidden


并没有删掉文字：

2.scroll
溢出的部分显示滚动条，可以拖着看

3.auto
（在需要的时候再添加滚动条）

总结：

（如果有定位，请慎用隐藏）