css的绝对定位与冒泡

为什么会把两个放在一起说呢？
来源于一个小案例，我们都知道事件冒泡机制，当你点击一个dom的时候，会先从下面的dom开始触发事件
也就是说

    <div  id="a">
        a
         <div  id="b">b</div>
    </div>
    <script>
    function clickA(){
        console.log("a");
    }
    function clickB(){
        console.log('b');
    }
    document.getElementById('a').addEventListener('click',clickA)
    document.getElementById('b').addEventListener('click',clickB)

点击会输出b a
但是我们要注意的是，冒泡是dom上的冒泡，而不是样子上面的，

这个样子是样子上面的，但是
如果
我们是

看起来两个是一样的
但是其结构是

    <div  id="a">
        a
    </div>
    <div  id="b">b</div>

这个时候我们可能会以为a在b下面（a确实视觉上是在b的下面）但是他们的dom是平级的，所以不会触发冒泡。所以只会输出b

因此，冒泡的发生条件是dom上的父子关系，而不是视觉上的层叠关系