为什么要用定位
可以让 盒子 自由的在某个盒子内部移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子
定位 ： 将盒子定在某个位置
定位的分类 position
定位 = 定位模式 + 边偏移
定位模式 ： 指定一个元素在文档中的定位方式
边偏移 ： 决定该元素的最终位置
定位模式 ：
static ： 静态定位
relative ： 相对定位
absolute ： 绝对定位
fixed ： 固定定位
边偏移 ： 就是说 定位的盒子移动到最终位置
top : 顶端偏移量
left ： 左侧偏移量
right ： 右侧偏移量
bottom ： 底部偏移量
静态定位 static
是元素的默认方式，无定位 ；
就是 按照标准流的特性摆放位置，没有边偏移
相对定位 relative
特点 ：
-
是相对于自身的定位来说的
-
会占有原来的位置 ， 它下面的盒子不会往上面窜 （不会脱标）
绝对定位 absolute
特点 ：
- 是相对于 祖先元素来说的
- 若 没有祖先元素 或者祖先元素没有定位，则移动的时候是以 浏览器文档 为基准的
- 只要父级有定位，那么移动的时候 就 以 父级为基准了
- 绝对定位 会脱标
没有父级或父级没有定位
此时 没有父级元素，所以 是 以浏览器为基准的
父级有定位
注 ：也就是说 是以最近一级的有定位的元素（ 若 父亲没有定位，而爷爷有定位，那么就 以 爷爷为基准 ）
脱标
子绝父相
子集使用 绝对定位 ， 那么父级要用相对定位
-
子盒子绝对定位，那么就不会占有位置，可以放到父盒子里面的任意一个地方，不会影响其他的兄弟盒子
-
父盒子需要加定位 用来显示子盒子只能在父盒子里面显示
-
父盒子布局时，需要占有位置，所以父盒子只能是相对定位
注 ： 子绝父项不是永远不变的，若父元素不需要占有位置，那么子绝父绝也会遇到
固定定位 fixed ！！
是元素固定在浏览器可视区的位置 ； 主要使用场景是 ： 可以在浏览器页面滚动时元素的位置不会改变
特点
- 是以浏览器的 可视窗口 为参照点移动元素的
- 跟父元素没有关系
- 不会随着滚动条而滚动
- 固定定位 不会占有原先的位置 （脱标）
固定到版心右侧
粘性定位 sticky
特点：
-
是以浏览器的 可视窗口 为参照点移动元素的
-
是占有原先位置的
-
必须 添加 top left right bottom 任意一个
定位的叠放次序 z-index
在使用 定位布局时，可能会出现盒子重叠的情况，所以 我们使用 z-index来设置盒子的叠放次序
数字越高，越在前面
-
数值可以是 正整数，负整数或者0 ， 默认是auto ，数字越大，盒子越靠上
-
若属性值相同，则按照书写规则，后来者居上
-
数字后面不能加单位
-
只有 定位的盒子才能加z-index
此时就是 谁最后一个写的 ，谁就在最上面
若我们利用 z-index时
定位扩展
绝对定位盒子居中
在没有加定位之前 ：
加了定位之后 ： 此时就不能水平居中了
那么 让加了定位的盒子在浏览器中水平居中 ：
必须给宽高 ：
这个和版心放在右侧的案例差不多
1、首先因为加了定位，所以绝对定位的盒子 会贴着父盒子边缘 ； 所以 先走 父盒子的一半
2、发现 走多了，所以再往前走 子盒子的一半
3、此时设置垂直居中 ，就也是 top走一半 ， 然后再向上走高度的一半
浮动元素不会压住标准流的文字
在 定位中 ， 定位盒子会压住标准流的盒子
而在浮动中 ，给元素添加浮动，那么定位盒子就不会压住标准流的文字，但仍然会压住盒子
浮动不会压住内容 ，是因为 浮动产生最初的目的 ，就是为了做文字环绕的
定位的特殊特性
-
若给行内元素 添加了 定位，那么可以直接设置高度或者宽度
-
若给块级元素添加定位 ，不给它高度或者宽度，那默认大小是 内容的大小
- 脱标的盒子不会触发外边距塌陷的 （外边距合并）
隐藏显示
本质 ： 让一个元素在页面上隐藏或者显示出来
display 显示隐藏元素 不会保留原来的位置
display ： none 隐藏元素
display ： block 显示
none
加了 display：none 后
会发现 ，第一个框消失了，并且不会占有原来的位置
visibility 显示隐藏元素 会保留原来的位置
属性有 ： inherit 继承父亲的
visible ： 可以看见
hidden ： 隐藏
hidden
overflow 溢出显示隐藏
是对溢出的部分进行设置
属性有 ：
visible ： 默认， 显示
auto ： 自动，超出就有滚动条，没超出就没有
hidden ： 隐藏
scroll ： 总是显示滚动条
visible 可见
auto 自动
hidden 隐藏
scroll 总是显示滚动条
不管内容多少，总是显示滚动条
注 ： 对于有定位的盒子 要谨慎使用 overflow：hidden ，因为它会隐藏多余的部分
