项目5 制作公司招聘页（浮动与定位）教案19

附件教案课程名称：授课教师：适用专业：教学单位：信息工程学院编制时间：2026年2月天津滨海汽车工程职业学院授课教案首页授课班级：课程名称课程类型□理论☑理论+实践□实训总学时64授课地点周次10授课学时2教学目标（一）知识目标掌握固定定位（fixed）的基本语法、核心特性及定位基准（浏览器窗口）。掌握z-index属性的作用，理解层叠顺序的控制规则，能解决定位元素的重叠问题。熟悉定位的进阶应用场景：固定导航栏、侧边栏、回到顶部按钮、模态框等。理解定位与浮动的组合使用逻辑，能根据复杂布局需求选择合适的技术方案。（二）技能目标能使用固定定位实现固定导航栏、侧边栏咨询模块，使其不随页面滚动而移动。能运用z-index属性控制定位元素的层叠顺序，解决元素重叠问题。能综合运用定位、浮动、清除浮动技术，实现企业招聘页的固定侧边栏、职位标签等模块。能独立排查定位进阶应用中的常见错误（如固定定位失效、z-index不生效、元素重叠错乱）。（三）素质目标培养复杂布局的综合设计能力，能将多种布局技术灵活组合应用。提升用户体验设计意识，理解固定定位在提升网页交互体验中的作用（如固定导航栏方便用户操作）。养成问题排查的系统思维，能逐步分析定位相关的布局错误并找到解决方案。树立技术服务于用户的理念，通过定位技术优化网页的交互逻辑和视觉体验。教学重点固定定位的核心特性：脱离标准流、基于浏览器窗口定位、不随页面滚动移动。固定定位的典型应用：固定导航栏、固定侧边栏、回到顶部按钮。z-index属性的使用：语法、取值规则（数值越大层叠级别越高）、生效条件（仅对非static定位元素生效）。定位与浮动的组合布局：浮动实现水平排列，定位实现精准元素控制。教学难点区分固定定位与绝对定位的差异（定位基准：浏览器窗口vs定位祖先元素、是否随页面滚动移动）。解决固定定位的常见问题：固定元素被父容器overflow隐藏、固定导航栏遮挡页面内容。理解z-index的层叠规则：默认层叠顺序、父子元素与兄弟元素的层叠优先级。复杂布局中多种技术的协同使用：浮动排列+定位精准控制+清除浮动，逻辑梳理与错误排查。教材及教参《AI+网页前端开发企业级项目教程》版本978-7-5606-7987-1信息化资源PPT课件、学习通教学环节安排教学设计1.理实结合：以模块化任务为核心，知识点对应实操场景，避免纯理论讲解。2.三维目标：明确知识、技能、素质目标，自然融入思政元素。3.分层适配：设计基础、提高、拓展内容，适配不同学生水平。4.闭环反馈：遵循“讲解-实操-纠错-总结-复盘”逻辑，强化知识吸收。教学实施要求1.讲练结合：实操占比≥60%，以案例演示+自主实操为主。2.规范把控：强调语义化HTML、模块化CSS，注重代码细节与注释。3.问题导向：聚焦高频错误，精准突破教学难点。4.过程评价：结合课堂表现、作业质量、实操成果综合评价。教学后记课后练习完成教材对应习题拓展提高无教学反思教学内容与教学过程注释（一）巩固复习（5分钟）提问回顾上一课时核心知识点：定位的组成、相对定位与绝对定位的差异、“子绝父相”模式的应用。实操小测试：让学生快速创建一个固定在浏览器顶部的导航栏，引出固定定位的学习需求。强调：固定定位是提升用户体验的重要技术，z-index是解决元素重叠的关键，二者是企业级网页开发的必备技能。（二）新课导入（5分钟）展示企业招聘页的固定侧边栏咨询模块、固定导航栏，滚动页面观察其位置不变的效果，提问学生：“这些模块如何实现‘不随页面滚动而移动’的效果？与绝对定位有什么区别？”展示两个对比效果：一个是未使用z-index导致重要元素被遮挡，一个是使用z-index后元素层叠顺序合理，引出z-index的核心作用——“控制元素层叠顺序”。引出课题：本节课将学习固定定位和z-index属性，掌握定位进阶应用，实现企业招聘页固定侧边栏、职位模块等核心布局，明确本课时的三维教学目标。（三）新课讲授（65分钟）本环节采用“特性讲解+案例实操+进阶组合”的模式，先突破固定定位，再掌握z-index，最后通过综合实操实现复杂布局。模块1：固定定位（fixed）（25分钟）语法：position:fixed;，配合边偏移（如top:0;left:0、bottom:20px;right:20px）。核心特性：脱离标准流：不保留原位置，与绝对定位一致。定位基准：始终基于浏览器窗口（视口）定位，不受父元素布局影响。不随页面滚动：页面滚动时，固定定位元素位置保持不变。与绝对定位的差异对比：通过表格梳理定位基准、滚动行为、适用场景的差异，强化理解。典型应用实操：实操1：实现固定导航栏，设置position:fixed;top:0;left:0;width:100%;，解决导航栏遮挡页面内容（添加页面顶部内边距）。实操2：实现企业招聘页固定侧边栏，设置position:fixed;top:50%;right:20px;transform:translateY(-50%);，使其垂直居中且固定在右侧，不随页面滚动移动。常见问题解决：固定定位失效：检查父元素是否有transform/filter/perspective属性（会改变定位基准），需避免或调整父元素样式。遮挡内容：为页面主体添加与固定元素高度一致的内边距或外边距。模块2：z-index层叠顺序（15分钟）核心作用：控制非static定位元素的层叠顺序，解决元素重叠时的显示优先级问题。语法：z-index:数值;，取值为负整数、0、正整数，默认值为auto（等价于0）。生效规则：仅对非static定位元素生效（relative/absolute/fixed）。数值越大，元素层叠级别越高，越显示在上方。兄弟元素：z-index值大的覆盖值小的；未设置z-index时，后定义的元素覆盖先定义的。父子元素：子元素默认在父元素上方，子元素z-index无效（需父元素设置z-index）。案例演示：创建两个重叠的绝对定位元素，分别设置z-index:1和z-index:2，观察z-index值大的元素显示在上方。实操3：实现“模态框”基础布局，背景遮罩z-index:100，模态框内容z-index:101，确保模态框显示在遮罩上方。模块3：定位与浮动的组合布局（25分钟）组合逻辑：浮动用于实现整体的水平排列（如导航栏项、多列卡片），定位用于实现局部的精准控制（如标签、图标、固定元素），清除浮动用于解决布局塌陷问题。综合实操：实现企业招聘页“职位模块”布局：步骤1：创建职位模块父容器，设置宽1200px、居中，添加clearfix类清除浮动。步骤2：职位分类标签（产品类、技术类等）设置float:left，实现水平排列。步骤3：职位卡片设置float:left，宽380px，添加“急聘”标签（子绝父相定位）。步骤4：固定侧边栏咨询模块（固定定位），悬浮时显示隐藏的咨询内容（后续将学习JavaScript控制，本次仅完成布局）。学生自主实操，教师巡视指导，重点解决：浮动与定位元素的布局冲突（如浮动元素被定位元素覆盖）。z-index不生效的问题（检查元素是否为非static定位）。固定定位元素与浮动布局的适配（如侧边栏不遮挡主要内容）。（四）课程思政（10分钟）用户体验至上的设计理念：固定导航栏方便用户随时导航，固定侧边栏方便用户咨询，这些应用都体现了“以用户为中心”的设计理念。让学生理解前端开发不仅是实现功能，更要注重用户体验，通过技术优化让用户使用更便捷。秩序与层级的设计思维：z-index控制元素的层叠顺序，就像现实世界的“层级秩序”，重要元素应处于更高层级，避免被遮挡。让学生在开发中养成秩序思维，合理规划元素层级，确保页面信息传递清晰有序。技术融合的创新思维：定位与浮动的组合使用，体现了“技术融合”的创新思维——单一技术有局限，组合使用能实现更复杂的需求。让学生在学习中打破技术壁垒，培养跨技术融合的思维，提升解决复杂问题的能力。责任与担当的职业素养：固定定位的精准性、z-index的合理性，直接影响用户的使用体验，一个小的布局错误可能导致用户无法正常操作。让学生体会职业责任，在开发中严谨对待每一个细节，对自己的代码负责，对用户负责。总结与作业1.课堂总结梳理本课时核心知识点：固定定位的特性与应用、z-index的语法与生效规则、定位与浮动的组合布局逻辑。强调重点：固定定位基于浏览器窗口定位、不随滚动移动；z-index仅对非static定位元素生效；组合布局的核心是“浮动控整体，定位控局部”。梳理易错点：固定定位被父元素overflow隐藏、z-index对static定位元素无效、组合布局中忘记清除浮动导致布局错乱。2.作业布置基础题：实现“回到顶部”按钮，固定定位在浏览器右下角，点击时跳转至页面顶部（href="#top"），按钮h