|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-10-19 15:58 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
小甲鱼老师已经讲过关于脱离文档流的事情。
这里简单回顾一下。
什么是文档流？
将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。
这个应该不难理解，HTML 中全部元素都是盒模型，盒模型占用一定的空间，依次排放在 HTML 中，形成了文档流。
何为脱离文档流？
元素脱离文档流之后，将不再在文档流中占据空间。
而是处于浮动状态（可以理解为漂浮在文档流的上方）。
脱离文档流的元素的定位基于正常的文档流。
当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
有几种脱离方式，本节课涉及到 absolute 。
使用 absolute 脱离文档流后的元素，是相对于该元素的父类元素进行定位的
（及以上，如果直系父类元素不满足条件则继续向上查询）
并且这个父类元素的 position 必须是非 static 定位的（static 是默认定位方式）。
上面这句话是重点！
z-index 也不难理解。
z-index 的取值有下面 3 种：
- 关键字 ：auto
- 数值： 任意整数（包括正数、负数、0）
- 通用取值：inherit initial unset
作用就以下 2 种：
- 在当前元素建立一个堆叠上下文，即告诉浏览器这里出现了堆叠，需要考虑分层了
- 告诉浏览器当前元素在这个堆叠上下文中所占的位置
只有 position 为 relative/absolute/fixed 的元素，z-index 属性才起作用。
注意：
想象网页页面所在的空间是一个三维空间，垂直显示屏方向为 Z 轴。
新的堆叠上下文是在z轴方向上又生出一个平面，其在 z 轴上的坐标位置由 z-index 属性指定。
后面的案例大家自己动手写，就不给代码咯。
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） |
评分
-
查看全部评分
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-9-29 08:55:56
置顶卡
千斤顶
显身卡
发表于 2020-9-29 09:17:50
楼主
发表于 2021-8-25 22:21:26
