定位position

什么是定位？

定位能够让我们把一个元素从他原本在正常布局流中应该在的位置移动到另一个位置

（自由的在某个盒子内移动位置 或者固定在屏幕中的某个位置）

实现定位：

边偏移量

top 设置距离：包含块距离顶部的距离

bottom 设置距离：包含块距离底部的距离

right 设置距离：包含块距离右部的距离

left 设置距离：包含块距离左部的距离

css显示模式？普通文档流：块级元素垂直排列，行内元素水平排列

让两个块级元素水平排列：①转行内块级元素

②浮动

相对定位：

position:relative;

相对于本身的位置发生移动；

相对于元素在正常文档流重的位置移动它，把一个正常布局流中的元素从它默认位置按照坐标进行相对移动

它原本所占空间不会改变

基础特性：

①不脱离文档流

②提升层级

③不定义边偏移量对元素基本没有影响

使用场景：

一般作为定位父级使用，配合绝对定位

绝对定位：

语法：position:absolute;

相对于【定位父级】进行定位，如果没有定位父级，他会一层一层往上找，一直找到body【浏览器窗口】。

有定位父级的话，相对于最近的定位父级进行定位。

基础特性：

①脱离文档流

②提升层级

使用场景：通常配合相对定位使用（父相子绝），分页，翻页，vlp

固定定位：

语法position:fixed;

元素的位置相对于浏览器的窗口进行固定，即使窗口是滚动的他也不会动。

基本特性：

1：提升层级；

2：脱离文档流；

使用场景：弹窗 侧边栏 滚动的导航 ，

静态定位：

语法：position：static；

表示将元素放在文档流的默认位置，html元素的默认值，既没有定位，遵循正常的文档流布局。

静态定位的元素不会受到便偏移量的影响。

使用场景：重置定位属性

z-index:提升层级<只能在定位里面使用，兄弟之间使用>