3.9 CSS定位布局-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元3 CSS基础 3.9 CSS定位布局 主要内容 CONTENTS PART 01 position属性 PART 03 z-index属性 PART 02 定位偏移 2 position属性 position属性用来精确定位一个元素在文档中的位置，即实现元素的精确定位。 position:static | relative | absolute | fixed 属性 说明 static 元素的默认定位方式，即各个HTML元素在文档流中默认的位置。 absolute 绝对定位方式，以最近的已定位的父元素为参照物（若没有定位的父元素，则向上回溯到body元素）。元素的位置偏移不影响标准文档流中的其它元素，其margin不与其他任何margin折叠。 relative 相对定位方式，参照自身在标准文档流中的位置，通过设置top，right，bottom，left等定位偏移属性进行偏移，偏移时不影响标准文档流中的其它元素。 fixed 固定定位方式，以当前浏览器窗口为参照物。当出现滚动条时，元素位置也保持不变，不会随着滚动。 【案例3.9.1】网站主导航中的hot标记精确定位 定位偏移 top/bottom/left/right属性用来精确定位一个元素在文档中的向上/右/下/左所偏移位置。 auto：默认状态，在文档流中按HTML定位规则分配。 length：用数值来定义距离上/下/左/右边的偏移量，可以为负值。 percentage：用百分比来定义距离上/下/左/右边的偏移量，可以为负值。 top/bottom/left/right : auto | length | percentage 定位偏移 z-index属性用来设置一个元素在文档中的层叠顺序。 auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。 integer：用整数值来定义堆叠级别，可以为负值，数值越大，堆叠的层次越高。 z-index : auto | integer 【案例3.9.2】设置z轴层叠样式 感谢观看 $