css定位

定位简介

定位是一个比较高级的布局手段

指的是将指定的元素摆放在页面的任意位置

定位=定位模式+边偏移

定位模式（position）

在css中postition（定位模式）语法：

选择器{position：属性值}

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘滞定位

静态定位（static）

静态定位就是元素的默认定位方式，无定位的意思，在布局上就是个废物

相对定位（relative）

相对定位是相对于元素在文档流原来的位置进行定位

特点：

• 相对于自己原来在标准文档流中位置来移动的
• 原来在文档流中的位置继续占用，后面的盒子继续以标准文档流方式对待它

绝对定位（absolute）

绝对定位是以带有定位的父元素来移动位置

1.完全脱离标准文档流

2.父元素没有定位，则相对于浏览器进行定位

3.父元素有定位，将元素离他最近的开启定位的祖先元素（父元素）进行定位

特点:

•  会脱离标准文档流，不占用原来位置
• 绝对定位会改变元素的性质，内联元素变块元素，块元素的宽高默认会被内容撑开

注意：绝对定位的盒子一定要搭配父元素来使用

   口诀：子绝父相——子元素是绝对定位，父元素是相对定位

固定定位（fixed）

固定定位是绝对定位的一种特殊形式

1.完全脱标——完全不占位置

2.只识别浏览器可视窗口，不会随滚动条滚动

3.单独使用，不需要搭配父元素

粘滞定位（sticky）

1.它是以浏览器为参照物

2.会占有原来位置，类似相对定位

边偏移

定位的盒子是通过边偏移来移动的

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

top	元素相对于定位位置的上偏移量
bottom	元素相对于定位位置的下偏移量
left	元素相对于定位位置的左偏移量
right	元素相对于定位位置的右偏移量

当元素开启了定位，可以通过left ，right ，top，bottom 四个属性来设置元素的偏移量

    越大越向相反方向移动（正值向相反方向移动，负值向相同方向移动）