发表于： 2019-06-19 23:17:13
1 827
今天完成的事：
完成了第三个页面，在相应元素插入链接，让它能实现页面跳转，完成了任务7。
明天计划的事：
完成深度思考，开始任务8编程，学习bootstrap框架，并在任务8使用。
遇到的问题：
在用a标签插入链时出现了下划线，通过给a标签添加样式 text-decoration: none;去掉下划线，
第三个页面这段文字有空字段间隔，我使用了 空格字符
收获：
了解了几种插入空格的方法，。
3使用非间断空格模拟制表符
z-index和层叠上下文如何形成的
在W3C是这样描述的：每个元素都具有三维空间位置，除了水平和垂直位置外，还能在 "Z轴" 上层层相叠、排列。元素在 "Z轴" 方向上的呈现顺序，由层叠上下文和层叠级别决定。在文档中，每个元素仅属于一个层叠上下文。元素的层叠级别为整型，它描述了在相同层叠上下文中元素在 "Z轴" 上的呈现顺序。同一层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别时，遵循后来居上的原则，即其在HTML文档中的顺序。不同层叠上下文中，元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序，与自身的层叠级别无关。
z-index语法：
z-index: auto(自动，默认值) | integer(整数) | inherit (继承)
z-index 接受的属性值为：关键字auto和整数，整数可以是负值。
需要注意的是 z-index 虽然很给力，却只能应用于定位元素（即设置了 position 属性为非 static 值），其它情况下，z-index 将被忽略。
在一个层叠上下文，所有的元素根据规则从下到上排列，分成了七个等级：
1、背景和边框 — 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。
2、负z-index值 — 层叠上下文内有着负z-index值的子元素。
3、块级盒 — 文档流中非行内非定位子元素。
4、浮动盒 — 非定位浮动元素。
5、行内盒 — 文档流中行内级别非定位子元素。
6、z-index: 0 — 定位元素。这些元素形成了新的层叠上下文。
7、正z-index值 — 定位元素。层叠上下文中的最高等级
解决方案
1,如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
2,如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素
3,如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，在父元素上方
4,如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效
5,如果兄弟元素的z-index生效，那么其子元素覆盖关系有父元素决定
返回列表
评论