CSS布局基础（七）（定位）

定位

如字面意思，定位的作用就是将元素，移动到指定的地方.
浮动一般用于横向排列块级元素；定位则可以让元素在盒子内自由移动或者固定在屏幕某个位置，并且可以将元素浮动起来 并且定位的浮动在 float 浮动之上

定位的优先级高于 margin

position: absolute | relative | fixed | static（默认）| sticky
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;

定位方式

值	说明	是否脱离文档流	位移参考系
absolute	绝对定位	是	最近的开启了定位的 上级元素，body兜底
relative	相对定位	否	自身原来位置
fixed	固定定位	是	页面窗口（不随页面滚动而移动） 左上角，默认占窗口整行，不受父盒子限制，
static	静态定位	否	默认不开启定位
sticky	粘性定位	否	达到指定位置之前无定位效果，一旦达到指定位置，表现出固定定位效果。页面窗口（不随页面滚动而移动） 左上角

定位偏移

以对应的参考物，在上下左右方向上 进行移动，偏移值可以使用固定值 或者 百分比。
同时指定上下 或者 左右时，以左上优先级更高
相对定位：相对自己的哪条边多远
绝对定位：相对有效定位父元素或者body（未找到开启定位的父元素时）哪条边多远
固定定位：相对body哪条边多远
粘性定位：必须加上一个偏移量。不脱离文档流，未触发时，表现为无定位；触发后表现为固定定位。常用于，元素随页面到达指定位置固定住，如果初始位置已经达到或者超过偏移量，那么会直接表现为粘性偏移量的固定定位效果

• top: 10px 或者 15% ;
• right: 10px;
• bottom: 10px;
• left: 10px;

其他知识点

z-index

当有多个元素，由于定位而重叠在一起时，使用 z-index属性指定层叠关系，值越大，越靠上；z-index 只有在定位的元素上才有效。若z-index 相同，则以标签先后顺序为准，后来居上==

父相子绝

若一个元素要开启绝对定位，其上级（父、组均可）元素要开启定位或者 body兜底 为参考物。常见组合曰父相子绝== 父元素开启相对定位（不影响父元素现有布局），子元素绝对定位可以自由定位

固定定位贴着版心

• 平移 left: 50%;
• 再 margin-left: 版心宽度的一半 （如果不要紧贴这，要点缝隙就适当增加个 外边距）

绝对定位到父盒子中央

定位的导致的位移 优先级 高于 margin: auto，也就是说，如果定位导致了位移， 那么 margin: 0 auto； 将不再生效。

position: absolute;
top: calc(50% - 子盒子高度的一半（这里就是 50px）);
left: calc(50% - 子盒子宽度的一半（这里就是 50px）);
width: 100px;
height: 100px;

或者

position: absolute;         
width: 100px;
height: 100px;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;

第二种方式借鉴了 固定定位贴版心 的思路，与第一种相比，把 calc 的处理拆分到 top 和 margin-top 上了。

绝对定位和固定定位浮动效果

绝对定位和固定定位产生的浮动效果，与 float 类似。如果对行内元素使用，元素会表现出行内块的特性。同样的，如果对块级元素使用绝对/固定定位，元素也会表现出行内块特性

原生浮动和定位产生的浮动的区别

1. 定位浮动 浮得 比 原生浮动更高
2. 原生浮动只会挡住盒子，而不会挡住盒子中的文字/图片，文字/图片会自动绕开浮动的盒子，常用于图文环绕，而定位则会完全挡住后面挤上来的盒子。