定位
如字面意思，定位的作用就是将元素，移动到指定的地方.
浮动一般用于横向排列块级元素；定位则可以让元素在盒子内自由移动或者固定在屏幕某个位置，并且可以将元素浮动起来 并且定位的浮动在 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 上了。文章来源：https://www.toymoban.com/news/detail-432500.html
绝对定位和固定定位浮动效果
绝对定位和固定定位产生的浮动效果，与 float 类似。如果对行内元素使用，元素会表现出行内块的特性。同样的，如果对块级元素使用绝对/固定定位，元素也会表现出行内块特性文章来源地址https://www.toymoban.com/news/detail-432500.html
原生浮动和定位产生的浮动的区别
- 定位浮动 浮得 比 原生浮动更高
- 原生浮动只会挡住盒子，而不会挡住盒子中的文字/图片，文字/图片会自动绕开浮动的盒子，常用于图文环绕，而定位则会完全挡住后面挤上来的盒子。
到了这里，关于CSS布局基础（定位）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术10（HTML5、CSS3、JavaScript ）CSS+DIV页面布局，固定定位，相对定位relative，绝对定位absolute，层定位的应用——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/783047-1.png)
