记一次填坑的过程(当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系)

先简单介绍一下背景吧，H5的微信端项目。C#+vue.js+amazeui。本地调试使用的google。

有个页面最近加了一点小功能，加完测试的时候，发现modal框出问题了，点击确认按钮无法执行回调事件。

amazeui的moadl用法(直接官网拷来的)：

$('#my-confirm').modal({
        relatedTarget: this,
        onConfirm: function(options) {
          var $link = $(this.relatedTarget).prev('a');
          var msg = $link.length ? '你要删除的链接 ID 为 ' + $link.data('id') :
            '确定了，但不知道要整哪样';
          alert(msg);
        },
        // closeOnConfirm: false,
        onCancel: function() {
          alert('算求，不弄了');
        }
      });

用法很简单，但是一直执行不了onConfirm。
但是之前一直是好的，在正式站点上测试，发现也有这个问题，正式代码记忆里一直没动过啊。(抱歉，虽然发了正式版，但是还没推广使用，木有用户，所以没人发现,哈哈)
在项目中，amazeui使用的是本地下载的代码，vue.js使用的是CDN,代码又没变动过，功能缺有问题了，头脑中第一个念头就是vue.js出问题啦，
去官网一看，还真升级了，先把vue.js原来的版本下载下来，改成本地引用，调试一下，还是有问题，懵逼了。
记忆中modal是有点bug，这个在官网上也说明了：

每个 Modal 实例都存储在对应元素的 $('.am-modal').data('amui.modal') 属性。------注意这句话，对应的代码：

function Plugin(option, relatedTarget) {
return this.each(function() {
var $this = $(this);
var data = $this.data('amui.modal');
var options = typeof option == 'object' && option;

if (!data) {
$this.data('amui.modal', (data = new Modal(this, options)));
}

if (typeof option == 'string') {
data[option] && data[option](relatedTarget);
} else {
data.toggle(option && option.relatedTarget || undefined);
}
});
}

于是先用方法三试了一下，还是不行，根本进不去confrim事件里，并且发现，对用的按钮会被绑定多次click事件，而我的modal是会被多次重新调用的，

就会导致一次点击执行多次绑定事件，所以排除方法三，按照方法四重写绑定事件：

$(function() {
var $confirm = $('#your-confirm');
var $confirmBtn = $confirm.find('[data-am-modal-confirm]');
var $cancelBtn = $confirm.find('[data-am-modal-cancel]');
$confirmBtn.off('click.confirm.modal.amui').on('click', function() {
// do something
});

$cancelBtn.off('click.cancel.modal.amui').on('click', function() {
// do something
});
});

改完运行，还是有问题，调试了一遍，发现还是进不去点击事件里面。再次懵逼了.

冷静下来想一想，不考虑其他的干扰因素，只针对按钮点击事件不执行这个点切入,难道点击的时候，没有触发按钮点击事件？？？

通过观察，还真是，原来使用modal的时候，插件会自动生成一个dimmer    div，起到遮罩的功能，

本来定义的dimmer的z-index比modal的z-index小，理论上应该是modal层在dimmer的上面，但是实际是dimmer在modal的上面，所以每次点击，其实都是点在dimmer上了，

因此按钮事件一直没被触发。好吧，有思路了。但是在ie下发现又是正常的，就上网搜了下z-index在google下无效.。

参考文章：http://www.cnblogs.com/shinnyChen/p/3789420.html

 结论：在chrome22+的浏览器中，position为fixed总是会创建新的重叠上下文，所以子fixed元素在此时会以父fixed元素为层叠上下文，子元素的层叠关系会受到父元素的影响。而在非chrome浏览器下子fixed元素并不会创建新的层叠上下文，fixed元素的层叠上下文为最近的层叠上下文。

     因此，我们应该尽量避免出现fixed元素相互嵌套的问题。如果必须有嵌套的情况，建议修改fixed父元素的z-index值来修正在chrome下fixed子元素的层叠问题。

     看了一下，modal外层的父元素确实是fixed，再看了一下这个样式文件，这个样式是最近才加的.......事件长了，自己都忘记了，

     当时只是简单的调了下样式，调往居然忘了测试，所以现在做新功能才发现问题，哎，自己被自己坑啊。

     总结了一下以后出现类似问题的解决思路：

     1.先确定自己最近修改的部分是否有影响(一定要仔细查看整个项目文件的提交记录).

     2.确认下第三方库最近有没更改.

     3.确认下控件本身是否有问题。

     4.抛开干扰，从最简单的现象入手分析.