定位

@Position

把子元素定位在祖先元素盒子的任意位置，甚至盒子外面

最后定位在哪里，需要一个参考对象 - 父相子绝

更多信息，请查看 MDN - position

position: static | relative | absolute | fixed | sticky;

相对定位 relative

不脱离文档流，仍然占据原来位置

层级提高，发生偏移时，如 top、left，可能会遮挡住后面标准流的元素

参考对象：自己[自恋型] - 灵魂出窍

相对定位很少单独使用，通常为子元素提供定位依据

绝对定位 absolute

脱离文档流 - 原地起飞

隐式的转换为块元素 block

参考对象：显式的设置了定位属性(相对或绝对都可以)的元素都可以作为参考对象，一般是父元素。如果父元素没有指定定位属性，则一级一级往上寻找，直至 <body>

可以使用数值或关键字 top、right、bottom、left 或负边距设置定位元素的偏移；如果不显式的指定，则停留在原来的位置；实际开发中，有时候不用设置偏移也可以实现特定需求

可以使用 inset 指定定位元素相对于参考对象的收缩位置：top、right、bottom、left；0为全覆盖

层级提高，会遮挡其他元素

inset

为元素设置内嵌/偏移大小；可以是百分比或具体的数值

对定位元素有效 - positioned elements

一个值的情况：0 - 全覆盖；100% - 缩小为中心一个点

其它情况，同 padding、margin 和 border，按照上 → 右 → 下 → 左的顺序指定

堆叠上下文 MDN - z-index

控制 Z轴方向上盒子堆叠时的前后次序/渲染排序，通常也称层级

只有显式使用定位属性的元素才有 z-index，标准文档流没有；但是后面的元素默认比前面的元素具有更高的层级

如果没有显式指定 z-index，则为 auto，按照文档流中元素出现的顺序，后来居上

z-index 大的元素，位于上层/近；z-index 小的元素位于下层/远；上层的元素会遮盖下层的元素

z-index 为正的元素，出现在没有指定 z-index 的元素的上面

z-index 为负的元素，出现在没有指定 z-index 的元素的下面

导航等需要始终引导用户的元素一般采用较大的层级，保证始终位于页面顶部，如汉堡菜单、弹出对话框等

常见应用 Cases

[] 利用不同的 z-index 营造 3D 氛围，更多细节，请参看顶部 banner、视距差 - parallax

[] 购物车；更多案例请访问定制多选按钮、一路有你 - 登录表单

初始化：button 取消边框、轮廓、背景

数量定位在右上角

还可以使用、伪元素、负边距实现

[] 头像设计 - 渐变背景边框

定位 position

伪元素 ::before

背景图片 background-image

线路渐变 linear-gradient

圆角边框 border-radius

开始隐藏2级菜单，:hover 时显示；后期使用 JavaScript 控制更灵活

适合桌面端；移动端通常使用汉堡菜单

注意：<a> 不能嵌套使用 <a>

[] 层级提升 - 对前后元素的影响；更多案例实现，请访问环环相扣、奥运五环

层级未提升 - 默认情况下，后续元素的层级比前面的高

后续元素：设置了背景颜色[当前设置为白色]，会覆盖前面的阴影

.el-undone {
    height: 40px;
    line-height: 40px;
    background-color: #f40;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4);
}

层级提升 - 通过指定目标元素为相对定位，并提升层级，使其位于后续元素的上层

当前元素：默认层级，不会覆盖

.el-done {
    // MUST
    position: relative;
    height: 40px;
    line-height: 40px;
    background-color: #f40;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4);
    // 不指定层级，默认在最上层
    // z-index: 1;
}

[] 使用 inset 定位元素

.inset {
  position: relative;
  width: 180px;
  aspect-ratio: 16/9;
  border: 1px solid var(--txt-warn-color);
  margin: 1rem auto;
}

.inset::before {
  content: '';
  position: absolute;
  inset: 20px 0;
  background-color: var(--txt-warn-color);
}

[] 居中；更多居中请访问元素居中

配合变换 transform 使用元素的垂直水平居中

  .container{
    position: relative;
  }
  
  .item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // translate: -50% -50%;
  }

总结与作业 Summary & Homework

总结 Summary: 父相子绝
作业 Homework: 定制个人LOGO

添加2级菜单导航