相对定位#

概念

• 相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位；
• 关键词：position: relative;
• left 向右移动；right向左移动；top向下移动； bottom向上移动；值可以为负数，即往规定方向相反移动
• 相对定位的元素，会在“老家留坑”，本质上仍然是在原来 的位置，只不过渲染在新的地方而已，渲染的图形可以比喻 成“影子”，不会对页面其他元素产生任何影响

相对定位的用途

• 相对定位用来微调元素位置
• 相对定位的元素，可以当做绝对定位的参考盒子

绝对定位#

概念：

• 绝对定位：盒子可以在浏览器中以坐标进行位置精准描述， 拥有自己的绝对位置

• 关键词：position: absolute;

• left 到左边的距离；right到右边的距离；top到上边的距离 ； bottom到下边的距离；值可以为负数，即往规定方向相反移动

• 绝对定位的元素脱离标准文档流，将释放自己的位置，对其 他元素不会产生任何干扰，而是对它们进行压盖

• 脱离标准文档流的方法：浮动、绝对定位、固定定位

• 绝对定位的参考盒子：并不是永远以浏览器作为基准点，会以自己祖先元素中，离自己最近的拥有定 位属性的盒子，当做基准点。这个盒子通常是相对定位的， 所以这个性质也叫作“子绝父相”

• 绝对定位的盒子垂直居中是一个非常实用的技术

  1
  position: absolute;
  2
  top: 50%;
  3
  margin-top: -自己高度一半;

绝对定位的用途

• 绝对定位用来制作“压盖” 、 “遮罩”效果
• 绝对定位用来结合CSS精灵使用
• 绝对定位可以结合JS实现动画

固定定位#

概念：

• 固定定位：不管页面如何卷动，它永远固定在那里

  1
  position: fixed;
  2
  top: 100px;
  3
  left: 100px;

固定定位注意事项

• 固定定位只能以页面为参考点，没有子固父相这个性质
• 固定定位脱离标准文档流

固定定位的用途

• 固定定位的用途：“返回顶部”、“楼层导航”

总结#

相对定位是相对自己定位，并且会占用原来位置；

绝对定位首先会参考离自己最近的定位元素做定位，如果没有就按照浏览器左上角开始定位，绝对定位会放弃自己原来位置

固定定位就是一直固定的位置，无论浏览器怎么滚动都是在一个位置