前端笔记-关于元素定位的深度理解

今天写uniapp的时候，突然发现自己的知识体系好空缺，，因为一个绝对定位和相对定位产生的样式问题，改了半天没改出来，，，给我气了半天，，这能行？

这个时候由于疫情，也不能下楼，简直是思绪万千，这个定位我再深度理解一波吧。虽然自动写uniapp后，写定位写的比较少，因为要兼容h5和移动端，很少遇到需要用绝对定位解决的事。但是为了防止以后再犯那种蠢错。总结一波。

进入正题

首先要知道，定位的意思就是这个元素（标签）要放在哪里，比如说，让它离左边远点？靠右一些？这些就是说元素的定位，
说到这里可能有的人糊涂了，那定位要放在父元素？去控制子元素的定位？还是说放在子元素中不受父元素的控制？其实这些思考是你自己卷自己…不需要思考这么多。。
只需要知道定位就是定某个元素的位置，这个位置可能受到父元素的影响，也可能受到子元素的影响就够了，终究还是看。

定位模式

static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
定位=定位模式+边偏移量。。。这个怎么理解呢？就是说你得告诉他你用什么模式定位（相对于什么去定位）偏移多少（上下左右的位置）这个时候它才能明白。。我按照什么去定位偏移多少。。
这时候杠精肯定要说了：你瞎扯，我有时候不写position，也能使用top left去定位元素。。。这是因为默认的文档流自己有一个定位

静态定位(static) - 一般不用

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none就是没有边框嘛，同理设置这个的时候也就预示着没有定位，静态定位static，不要定位的时候用。但是要理解明白啊，不要定位，是说不设置定位，并不是说让这个元素消失的意思
语法：
选择器 { position: static; }

静态定位 按照标准流特性摆放位置，它没有边偏移。就是该在哪就在哪，一动不动

相对定位(relative) - 非常重要，不会就费

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的，
就是说你写了3个div标签，就算你啥样式不给，给个大小，它就在这个页面中有自己的位置，如果你要设置一个 position: relative;然后让它上下左右移动的时候，它是相对于之前所在位置进行移动
语法：
选择器 { position: relative; }

相对定位的特点：（务必记住）
1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
最典型的应用是给绝对定位当付清节点的。。。

绝对定位(absolute) -同样非常重要

绝对定位的介绍

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
语法：
选择器 { position: absolute; }

完全脱标 —— 完全不占位置，原先的位置会被后面的元素占用
父元素没有定位，则以浏览器为准定位（Document 文档）。

这时候有人肯定又要想，，那不就是相对于窗口定位么，你直接说相当于body定位不就可以了？如果它父元素都没有定位，你这么说我不置可否，但是实际上并非如此
设置了absolute后，元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

定位口诀 —— 子绝父相

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。

这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

疑问：为什么在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？

观察下图，思考一下在布局时，左右两个方向的箭头图片以及父级盒子的定位方式。

分析：

1.方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
2.父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
3.如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。
结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

固定定位(fixed) -非常 重要

固定定位是元素固定于浏览器可视区的位置（要注意绝对定位不是）。主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变，比如就想一直浮动在窗体的一些东西，滚动不使其影响的内容。
语法：
选择器 { position: fixed; }

固定定位的特点：（务必记住）：
1.以浏览器的可视窗口为参照点移动元素。（左上角的点）

跟父元素没有任何关系
不随滚动条滚动。（适合浏览器页面的固定浮窗）
2.固定定位不在占有原先的位置。（同样是脱离文档流这点到是和绝对定位有点相似）

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
完全脱标—— 完全不占位置；
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
跟父元素没有任何关系；单独使用的
不随滚动条滚动。

文章参考 https://zhuanlan.zhihu.com/p/434434899