【32】CSS核心样式（9）——定位属性（上）

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

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

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

一、定位属性介绍

定位属性	具体含义
属性名	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; 
 }