定位属性查漏补缺

前言

定位属性position，我想这个属性应该是绝大多数前端基本都滚瓜烂熟的了吧，什么”父相子绝”的快速记住其使用方法；
🤔 但是这里如果采用了非强制限定定位元素的尺寸、位置，定位元素可以被允许按照其内容来”安排”自己的话，是否就是可以实现到灵活性更高的布局以及内容的自适应的展示呢？

基本概念

positions属性	描述
取值	static / relative / sticky / absolute / fixed
初始值	static
适用于	所有元素
继承性	否

✨ position的各个属性描述如下：

static: 正常生成元素框，块级元素生成矩形框，位于文档流中，行内元素生成一个/多个框，跟随父元素流动；
relative: 元素框偏移一定的距离，元素的形状以及所占据的空间不变；
absolute: 元素框完全从文档流中移除，相对容纳块定位；
fixed: 相对于视区进行absolute；
sticky: 元素以开始留在常规的文档流中，达到触发粘滞的条件是，从常规的文档流中移除，但原本所占据的空间仍然保留，在此中情况下，相当于相对于容纳块absolute

不一样的容纳块

对于定位元素而言，容纳块完全取决于定位类型；
✨ 对非根元素而言，如果position属性的值是relative/static，其容纳块由最近的块级、单元格或行内块级祖辈元素框的content边界划定；
✨ 而如果position属性的值是absolute，那么其容纳块由最近的非static的祖先元素组成。

⚠️ 定位元素可能会位于容纳块的外部，因为我们可以使用偏移属性，将其偏移到容纳块的外部！！！

偏移属性(top、right、bottom、left)

👆中使用的定位方式可以指定每种定位方式的偏移量，这4中属性叫做偏移属性，指定距容纳块最近的变的偏移量;
以设置了定位属性的元素框来说，让自身相对于容纳块进行偏移量的调整，来实现布局的调整；

偏移属性	描述
取值	length/percentage/auto
初始值	auto
适用于	定位元素
继承性	否
百分数计算规则	`top/bottom`相对于容纳块的高度来计算，`left/right`相对于容纳块的宽度来计算

当出现了负数的数值时，也就是代表着从👆的坐标轴上从容纳块中突出来，如下所示：

宽度与高度(width、height)

有时候，将元素确定定位的位置之后，可能还需要声明元素的宽度以及高度，或者想限定元素的高度以及宽度，
而有时候，元素的宽度以及高度则会有用户代理自行自动计算。

✨ 有时，如果我们使用了定位属性来定位元素的同时，一般利用两个轴方向上的一个属性即可确定元素的位置，比如left+top、left+bottom、right+top、right+bottom 4⃣️种组合
方式，可以确定一个元素的位置，如果我们直接是4个属性一起设置，还可以通过4个属性以及容纳块的信息，来确定当前定位元素框的一个宽度以及高度(因为width与height的默认值是auto)，
⚠️但是如果定位元素框添加了padding、border、margin的时候，由于默认的box-sizing: padding-box，在设置了width以及height了之后，将导致它还会继续往外撑开，这是可以是
采用box-sizing: border-box的方式来保证元素的width以及height的一个计算规则！！！

溢出(overflow)

如果🈶️个固定尺寸的元素，内容放不下，这种情况下使用overflow属性来处理

overflow属性	描述
取值	visible/hidden/scroll/auto
适用于	所有元素
初始值	visible
继承性	否

📖 默认visible的意思是，超出元素框的内容是可见的，👇来对比下不同的取值所对应的效果：

从上面我们可以看出平时在使用滚动条的时候，多考虑使用auto，因为auto会根据内容进行滚动条的控制，👆的auto控制了只在y轴方向上出现滚动条

可见性(visibility)

控制整个元素的可见性

visibility属性	描述
取值	visible/hidden/collapse
初始值	visible
适用于	所有元素
继承性	否

⚠️ visibility:hidden(这里简称前者)与display:none(这里简称后者)的区别: 前者隐藏后依然占据空间，而后者不占据空间！

Z轴上的位置(z-index)

如果两个元素框在2D空间上发生了重叠的话，那么哪个应该是在上层呢？我们可以利用z-index来控制元素处于上层
✨ 如果两个定位元素发生了重叠，那么后编写在html节点中的，将会覆盖上一个定位元素：

上面第3⃣️种情况下，使用了z-index的定位元素，将会覆盖在未使用该属性，或者比当前元素使用的z-index值要小！！！

🤔 如果是嵌套使用的话，其内容又会是怎样的一个效果呢？？

🤔 如果上面中的定位元素又包含了子元素，自元素的z轴层级关系，将会按照父容器的层级关系来摆放内容！！

👆这个时候的孩子被挡住了，那如果我们想把孩子元素控制为不被挡住的话，可以将孩子元素定义为定位属性，然后将其z-index值设置为大于0的数字，告诉其层级要比one父容器要高

🪐 由👆我们可以得知日常在使用z-index的时候有这样子的一个规则：

同一个容纳块中有两个或者两个以上的定位元素，为灵活控制元素的z轴，推荐将其中各个元素的z-index属性给配置好，按照实际情况进行数字的配置；
如果设置了z-index属性的元素又包含🈶️其他的z-index子元素，则需要将其设置为在👆第一点的基础上进行与容纳块自身的其他元素设置

绝对定位(absolute)

绝对定位的元素完全从文档流中移除，其位置相对容纳块确定，外边距的边界使用偏移属性(left/top/bottom/right)来划定，
绝对定位的元素不围绕其他元素的内容流动，而且其内容也不会围绕定位元素流动，这意味着绝对定位的元素可能会发生重叠的结果！！
⚠️绝对元素的容纳块是position属性为非static默认属性的块，如下图所示，非relative也能够做为absolute的容纳块

利用位置+尺寸来定义定位元素

🤔试想一下：如果我们将偏移属性的4⃣️个属性的值都设置为某个数值的话，这将会发生什么事情呢？
✨ 由于设置了4个偏移属性，而导致的当前定位属性的4条边将跟随着其容纳块的4边来进行相应的偏移，从而也就确定了该定位元素的尺寸大小！！！
而如果在设置了4个偏移属性的前提下，又再进行了width以及height的设定的话，应该是🈶️冲突，因此，有些属性的值必然要被舍弃～

自动确定边界

绝对定位一个元素时，如果除bottom之外的某个偏移属性被设置为auto，将得到一种特殊的行为，如下所示：

🪐 这里引入一个概念：静态位置，🈯️的是元素在常规文档流中的位置，其top值是容纳块的顶边距一个想象框体上外边距边界的距离，
👆的top为auto的定位属性，在设置了absolute属性的时候，获取原本static文档流下的top的值，然后根据left进行偏移移动而已！！！

非置换元素的位置与尺寸

一般来说，元素的尺寸和位置取决于容纳块，不同的属性对元素的布局会产生一定的影响，但是最根本的影响还是来自于容纳块。
以定位元素的宽度和横向位置为例，二者需要🈵️足一个等式：
left + margin-left + border-width-left + padding-left + width + padding-right + border-width-right + margin-right + right = 容纳块的宽度

而如果这里将定位元素的margin-left+margin-right都设置为auto，然后其他的属性不设置为auto的话，又会是怎样的一个情况呢？

置换元素的位置与尺寸

置换元素(比如img)由于自身拥有高度，导致与非置换元素🈶️一定的区别

如果将width/height设置为auto，那么width/height的具体值将有该置换定位元素的图片width/height来决定；
如果left/top的值是auto，那么将会被替换为对应的”静态位置”；
如果此时margin-left与margin-right/margin-top与margin-bottom的值仍为auto，把二者设为相等的值，让元素居中显示在容纳块中