★文章内容学习来源：拉勾教育大前端就业集训营

我们已经了解过布局相关的盒模型、浮动等属性，而定位是另一种布局的重要属性，常用于制作压盖或者位置相关的效果。

本篇•定位属性介绍• 相对定位 • 绝对定位 • 固定定位
下篇 • 定位应用 • 压盖顺序

一、定位属性介绍

定位属性 具体含义
属性名 position
属性值 relative 相对定位
absolute 绝对定位
fixed 固定定位
作用 设置定位的元素，它需要根据某个参考元素发生位置的偏移
偏移量属性 定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置
水平方向：left、right
垂直方向：top、bottom
属性值 常用 px 为单位的数值，或者百分比

二、相对定位

1.含义

  • 属性值：relative，相对的意思。
  • 参考元素：标签加载的原始位置。
  • 必须搭配偏移量属性才能发生位置移动。 
position: relative; 
left: 100px;
top: 100px;

2.性质

  • 性质：相对定位的元素不脱离标签的原始状态（标准流、浮动）*，不会让出原来占有的位置。 元素显示效果上，原位留坑，形影分离。

3. 注意事项

注意①：偏移量属性的值是区分正负的
  • 正数：表示偏移方向与属性名方向相反。
  • 负数：表示偏移方向与属性名方向相同。 
position: relative;
left: 100px; /*向右移50px*/
top: 100px;/*向下移100px*/


position: relative;
left: ‐50px; /*向左移50px*/
top: ‐100px;/*向上移100px*/

注意②：同一个方向，不能设置两个偏移量属性
  • 如果水平方向同时设置了 left 和 right 属性，只会加载 left 属性。垂直方向只加载 top 属性。
  • 建议：书写时从水平方向和垂直方向各挑一个属性进行组合。 
position: relative; 
 left: ‐50px; /*只会加载 left 属性*/
 top: ‐100px; /*只加载 top 属性*/
right: ‐50px;
bottom: ‐50px;

注意③： 为了方便记忆，可以选择只使用 left、top 组合

由于相对定位的参考元素是自身，left 的正值等价于 right 的负值，top 的 正值等价于 bottom 的负值。

position: relative; 
right: ‐50px; 
bottom: ‐50px; 

position: relative; 
left: 50px;
 top: 50px;

4.实际应用

  • 由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况。
  • 相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。

三、绝对定位

1.含义

  • 属性值：absolute，绝对的意思。
  • 参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考 <body>。
  • 必须搭配偏移量属性才会发生位置移动。 
position: absolute; 
left: 50px;
top: 50px;

2.性质

  • 绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。

3.注意事项

  • 注意①：绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合， 会导致绝对定位元素的参考点不同，具***移效果不同。
  • 注意②：在绝对定位中，由于参考点不同，left 正值不再等价于 right 的负值。
  • 注意③： 以 <body>为参考元素时，参考点的确定与偏移量方向有关。
    **** 如果有 top 参与的定位，参考点就是 <body>页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。
    **** 如果有 bottom 参与的绝对定位，参考点是<body>页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。

实际应用中，如果以 <body>为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用 <body> 作为参考元素。

  • 注意④：以祖先级为参考元素（如果祖先级中有定位的元素，就不会去参考<body>）
    *** 参考元素：参考的是祖先元素中有任意定位的，在 HTML 结构中距离目标最近的祖先。

4. 三种定位组合方式

（1）根据绝对定位的参考元素的定位类型不同:
①子绝父相，子元素绝对定位，父元素相对定位。
②子绝父绝，子元素绝对定位，父元素绝对定位。
③子绝父固，子元素绝对定位，父元素固定定位。
由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况

（2）祖先元素参考点
如果绝对定位的参考元素是某个祖先级，参考点是盒子 border 以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的 padding 区域。

  • left、top：参考点是祖先的 border 以内的左上顶点，对比点是盒子自身的左上角。
  • right、top：参考点是祖先的 border 以内的右上顶点，对比点是盒子自身的右上角。
  • left、bottom：参考点是祖先的 border 以内的左下顶点，对比点是盒子自身的左下角。
  • right、bottom：参考点是祖先的 border 以内的右下顶点，对比点是盒子自身的右 下角。

四、固定定位

1.含义

  • 属性值：fixed，固定的意思。
  • 参考元素：浏览器窗口。
  • 参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关。 由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置。 
.backtop {
    
  position: fixed; 
  width: 100px; 
  height: 50px; 
  right: 50px; 
  bottom: 50px; 
  background‐color: #ccc;
  font: bold 20px/50px "Arial"; 
  text‐align: center; 
  color: #333; 
  text‐decoration: none; 
 }

2.性质

  • 固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。
  • 固定定位的元素会始终显示在浏览器窗口上

下篇继续：【33】CSS核心样式（9）——定位属性（下）