持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

一、定位position

• position用于实现对元素的定位，css定位分三种：
  • position:fixed:固定定位
  • position:relative:相对定位
  • position:absolute:绝对定位
• 在使用定位属性时，一定要配合定位坐标来使用：
  • left：表示定位元素里左边有多远
  • right：表示定位元素里右边有多远
  • top：表示定位元素里上边有多远
  • bottom：表示定位元素里下边有多远

（一）固定定位

• 固定定位是相对于浏览器窗口定位。不管页面如何滚动，固定得元素显示的位置不会改变

固定定位特点

• 固定定位元素脱离了标准文档流
• 固定定位元素的层级比标准文档流里的元素高，所以它会压盖标准文档流里的元素
• 固定定位元素不占用空间
• 固定定位元素显示的位置不会随浏览器滚动而滚动

（二）相对定位

• 相对定定位是相对于定位元素本身定位。相对定位元素会在原来的位置留下一个“坑”，所以一般情况下很少单数使用，它主要配合“绝对定位”元素来使用

相对定位特点

• 相对定位元素没有脱离标准文档流
• 相对定位元素如果没有设置定位坐标，那么它还在原来的位置
• 相对定位元素设置的定位坐标后，会在原来的位置留下一个“坑”
• 相对定位元素会将标准文档流中的元素压盖住
• 相对定位元素的定位坐标可以为负数

（三）绝对定位

• 绝对定位是相对于“祖先得元素”进行定位
• 绝对定位元素它会先去查找其父元素是否设置了定位的属性，如果设置了定位的属性，那么它就会相对于其父元素来进行定位;但是如果它的父元素没有设置定位属性，那么它就会去查找其父元素的上一级元素是否设置了定位的属性,如果有设置，就相对于其父元素的上一级元素进行定位；但是如果没有设置那么会继续往向一级进行查找,如果其祖先元素都没有设置定位属性，那么它会相对于“浏览器窗口”（body）来进行定位

绝对定位特点

• 绝对定位元素它脱离了标准文档流，因此不占用空间
• 绝对定位元素会压盖住标准文档流中的元素
• 绝对定位元素相对于其“祖先定位元素”来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位还可以是绝对定位。但是我们一般只会给其实祖先定位元素设置相对定位属性。“子绝父相”，即子元素设置绝对定位父元素设置相对定位