继上一篇，做下拉菜单的时候，涉及到了position，这篇就来学习下~
先看下position在下拉菜单中的应用：
一、关键代码回顾：
/* 下拉菜单容器 */
.dropdown {
position: relative; /* ➊ 关键父级 */
}
/* 下拉内容（默认隐藏） */
.dropdown-content {
position: absolute; /* ➋ 关键子级 */
top: 100%; /* ➌ 定位到父元素底部 */
/* 别的不展示了。。。 */
}
为什么呢？来分步骤分析下：
步骤1：建立定位上下文
/* 下拉菜单容器 */
.dropdown {
position: relative; /* 创建定位基准 */
display: inline-block; /* 保持容器宽度与内容一致 */
}为什么必须设置 relative？
给内部的 absolute 元素提供一个定位的坐标系。如果不设置，下拉菜单会一直向上查找，直到<html>标签。
步骤2：绝对定位子元素
/* 下拉内容（默认隐藏） */
.dropdown-content {
position: absolute;
top: 100%; /* 从父元素顶部向下偏移100%高度 */
left: 0; /* 与父元素左对齐 */
}关键数值解析：
top: 100%：表示「从父元素顶部开始，向下移动父元素高度的100%」如果设置
bottom: 0会贴到父元素顶部（try try）
步骤3：处理边界情况
.dropdown-content {
width: 100%; /* 与父元素同宽 */
min-width: 160px; /* 防止内容过窄 */
}设计技巧：绝对定位元素默认宽度由内容决定，显式设置
width:100%可以让下拉菜单和按钮等宽
区别对比：
| 属性值 | 特点 | 在下拉菜单中的作用 |
|---|---|---|
relative |
元素仍占据文档流位置，但可以相对自身原始位置偏移 | 为 absolute 子元素提供定位基准 |
absolute |
元素脱离文档流，相对于最近的非 static 祖先元素定位 |
让下拉内容悬浮在按钮下方 |
static |
默认值，元素按正常文档流排列 | - |
注意：
- relative 定位元素经常被用来作为绝对定位元素的容器块。
- absolute 定位使元素的位置与文档流无关，因此不占据空间。
- absolute 定位的元素和其他元素重叠。
学习sticky 定位
一、先明确下新需求：
- 增加多几个下拉框的选项，然后做滚动条
- 第一个做“不吃”的选项，而且是固定的，下滑不会消失
二、HTML 结构修改
<div class="dropdown">
<button class="dropdown-btn">今天吃什么？</button>
<div class="dropdown-content">
<div class="sticky-item">不吃</div> <!-- 新增固定项 -->
<a href="#">火锅</a>
<a href="#">炸鸡</a>
<a href="#">麻辣烫</a>
<a href="#">烧烤</a>
<a href="#">披萨</a>
<a href="#">寿司</a> <!-- 新增选项 -->
<a href="#">拉面</a>
<a href="#">咖喱</a>
<a href="#">沙拉</a>
<a href="#">牛排</a>
</div>
</div>三、CSS 关键修改
1. 实现可滚动下拉框
.dropdown-content {
max-height: 200px; /* 限制最大高度 */
overflow-y: auto; /* 垂直滚动 */
scrollbar-width: thin; /* 更细的滚动条 */
}2. 固定首项「不吃」
.sticky-item {
position: sticky;
top: 0; /* 距离顶部的距离 */
z-index: 2; /* 确保粘性元素在其他内容之上 */
font-weight: bold;
border-bottom: 1px solid #ddd; /* 添加底部边框,视觉分隔 */
background-color: #f9f9f9;
}注意：记得把这块样式添加上去
三、关键知识点解析
1. position: sticky 的妙用
特性：元素在视口内时表现为
fixed，离开视口时表现为relative必须配合
top/bottom等方位属性使用在下拉菜单中的应用：让“不吃”选项始终可见
2. 层级关系（z-index）
sticky-item的z-index: 2确保它始终在滚动内容之上下拉菜单整体的
z-index: 1确保悬浮在其他元素上方
3. 如果sticky 无效可能原因：
父元素有
overflow: hidden未设置
top/bottom值祖先元素高度不足