一、背景
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上面，并可以监听到事件变化。
参考
原文：https://www.cnblogs.com/future-dream/p/14802375.html