一、背景
css最为重要的就是布局,但是还有一个比较重要的就是层次的叠加。如果多个布局叠加在一起的时候,如果只是展示不在视觉上的问题,但是在实现js交互的时候如点击之类的 就会出现无法点击到的情况。
二、举例
2.1 问题描述
实现这样的一个盒模型。一个标签为绝对定位,另一个标签默认。
运行结果,不论如何点击都无法出现js的代码。
2.2 解决方案
这里讲一下解决的思路,主要分为两种:一个是非用absolute不可,另一个是
2.2.1 都需要绝对定位的时候
把css的设置改成如下的代码,并设置顺序,因为都是绝对定位的时候会采取栈叠加的方式进行处理。
html标签顺序
<div class="two"></div> <div class="one"></div>
css代码
.one { height: 100px; width: 100px; background-color: #8A6DE9; position: absolute; left: 0; top: 0; margin: 1em 0 0 1em; }
2.2.2 避免绝对定位占用
设计的时候尽可能少的使用绝对定位,使用不同的盒子模型去处理。
三、渲染过程
3.1 css渲染过程
css渲染过程,这里的图片是从别人博客中搬来的。大家都在使用的过程,这里对过程进行了标注,因此选取这张图片。
3.2 整个浏览器渲染流程
针对整个过程的浏览器渲染流程
3.3 css的解析过程
根据jartto's博客中的第四章内容,这里简单的将css过程转化为流程图的形式,对于其他复杂的就是进行回溯渲染等相关内容。
四、思考
通过上面的实例可以知道,当存在absolute的时候,层次加载会高于默认。同是absolute的时候层次会因为css的dom树而按照类似栈的方式往上叠加。因此后面的absolute定位会叠加在前面的absolute上面,并可以监听到事件变化。
参考