4-0 精确定位——掌控布局之CSS定位技巧.pptxVIP

零号任务精确定位——掌控布局之CSS定位技巧汇报人：xxx时间：2026

任务说明01

在模块3创建的社团管理网页的基础上完成以下操作。（1）使用绝对定位固定头部导航栏的位置，避免页面下滑的时候导航栏被默认隐藏。（2）使用z-index:1000将header的层级设为较高的数值，以保证header在其他内容之上显示，避免被内容遮挡。零号任务任务说明

知识准备02

01定位的概念02不同的定位方式目录03重叠元素的处理

1.定位的概念知识准备定位实现对元素的精准控制，其底层原理依赖于CSS引擎如何解析和渲染页面上的元素。浏览器接收到HTML和CSS代码后，会构建DOM树和渲染树，并根据CSS规则计算出每个元素的位置。对于设置了定位的元素，CSS引擎会根据上述规则来决定它们最终在页面上的位置。定位方式描述是否脱离文档流静态定位默认定位方式，不支持top、right、bottom、left属性否相对定位元素在原有位置基础上偏移，但仍占据原有位置空间否绝对定位相对于最近的已定位祖先元素定位是固定定位相对于浏览器窗口定位，页面滚动时位置不变是黏性定位当页面滚动到特定位置时，元素会转变为固定定位，此前为相对定位占据原有位置空间取决于条件

2.不同的定位方式知识准备使用方法①设置定位属性：指定元素的定位方式（如static、relative、absolute、fixed、stick