定位的语法

定位

能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置（自由的在某个盒子内移动位置或固定在屏幕中的某个位置）

实现定位

边偏移量：top 到顶部的距离

bottom 到底部的距离

right 到右边的距离

left 到左边的距离

相对定位

相对于元素本身的位置发生移动，它原本所占的空间不会改变

相对于元素在正常文档流中的位置移动它，把一个正常布局流中的元素从它默认位置按照坐标进行相对移动。它原本所占的空间不会改变

语法：position:relative;

基础特性：不脱离文档流

提升层级

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

使用场景：微调自己的位置

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

绝对定位

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

语法：position:absolute;

基础特性：脱离文档流

提升层级

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

固定定位

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

语法：position:fixed;

基本特性：脱离文档流

提升层级

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

静态定位

表示将元素放在文档流的默认位置，html元素的默认值，即没有定位，遵循正常的文档流布局，静态定位的元素不会受到边偏移量的影响

语法：position:static;

使用场景：重置定位属性

定位的层级顺序

语法：z-index:1;数值越大层级越高