项目中碰到的关于css层级覆盖的问题，现记录一下。

网页的布局，如下：

 外侧是父元素的div，左侧有个侧边栏的子元素 div.child1 ，右侧是展示内容的子元素 div.child2 。

如果两个子元素的 div 都是相对定位，而且左侧边栏的 div.child1 的 z-index 的值为200，右侧展示内容的子元素 div.child2 的 z-index 的值为100 。

如果左侧 div.child1 里面有个类名为 btn 的按钮的css设置的有定位属性，且 z-index 的值为 100。

那么右侧 div.child2 里面的子元素，或者孙子元素等等，如果有弹框，需要覆盖整个页面的时候，是覆盖不了左侧div里面的 btn 按钮的，即使弹框的 z-inex 的值设置为999，高于左侧btn按钮的 z-index 的100的值，也覆盖不了。

因为起决定因素的是左侧 div.child1 的层级高于右侧 div.child2 的层级，所以不管右侧 div.child2 中下面的子元素等设置多高的 z-index 值，都覆盖不了左侧 div.child1 中的带有 z-index 的元素。

项目中碰到的这样的问题，解决方法就是 div.child2 中的弹框显示的时候，发送一个事件出来，左侧的 div.child1 接收事件，隐藏 btn 按钮。