. 初始化：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 {
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%;
}