054 - 不畏浮云遮望眼
本帖最后由 不二如是 于 2020-10-19 15:58 编辑上一集：053 - 你的定位决定你的地位
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
小甲鱼老师已经讲过关于脱离文档流的事情。
这里简单回顾一下。
什么是文档流？
将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。
这个应该不难理解，HTML 中全部元素都是盒模型，盒模型占用一定的空间，依次排放在 HTML 中，形成了文档流。
何为脱离文档流？
元素脱离文档流之后，将不再在文档流中占据空间。
而是处于浮动状态（可以理解为漂浮在文档流的上方）。
脱离文档流的元素的定位基于正常的文档流。
当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
有几种脱离方式，本节课涉及到 absolute 。
使用 absolute 脱离文档流后的元素，是相对于该元素的父类元素进行定位的
（及以上，如果直系父类元素不满足条件则继续向上查询）
并且这个父类元素的 position 必须是非 static 定位的（static 是默认定位方式）。
上面这句话是重点！
z-index 也不难理解。
z-index 的取值有下面 3 种：
[*]关键字 ：auto
[*]数值： 任意整数（包括正数、负数、0）
[*]通用取值：inherit initial unset
作用就以下 2 种：
[*]在当前元素建立一个堆叠上下文，即告诉浏览器这里出现了堆叠，需要考虑分层了
[*]告诉浏览器当前元素在这个堆叠上下文中所占的位置
只有 position 为 relative/absolute/fixed 的元素，z-index 属性才起作用。
注意：**** Hidden Message *****
想象网页页面所在的空间是一个三维空间，垂直显示屏方向为 Z 轴。
新的堆叠上下文是在z轴方向上又生出一个平面，其在 z 轴上的坐标位置由 z-index 属性指定。
后面的案例大家自己动手写，就不给代码咯。
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：055 - 终于有人可以把BFC给讲清楚了
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ） 沙发呀{:10_256:}
顺便问一句Python咋还不更新呢 jtxs0000 发表于 2020-9-29 09:17
沙发呀
顺便问一句Python咋还不更新呢
可以先看看已完结的第一版 不二如是 发表于 2020-9-29 15:50
可以先看看已完结的第一版
先买的书，再看的视频，感觉新版易懂一点，看书会打瞌睡呀{:10_266:} 回复看看看~ 啦啦啦
隐藏技能来咯！ {:5_95:} 想看 {:10_254:} z-index默认值为0 1 {:10_257:} {:10_305:} 学习了{:10_333:}
页:
[1]