element-ui的el-dialog组件内容在阴影下面

在使用 element-ui 的 el-dialog 组件的时候可能会遇到一些小问题，例如弹框里的内容出现在了阴影部分的下面，如下：

 遇到这种情况也不要慌

只需在 el-dialog 标签上添加上以下代码即可

:append-to-body="true"

// append-to-body: Dialog 自身是否插入至 body 元素上

发生这种情况的原因：

 1、首先要知道 z-index 是什么。

定义：指定一个元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

2、父元素的 z-index 会影响对子元素产生影响

来一个简单的示例：

如果只看 z-index 的话，那么显然 box_b 这个元素是在最上面的，但实际情况却是 box 元素在最上面：

 这是因为 box_b 的父元素 box_a 的层级只有 99 ,比 box 的 100 要低，所以 box_b也会受到其父元素的影响。

如果 box_a 没有定位，或者 z-index 比 box 高，就能够实现我们想要的结果。

示例结束。

看文档可以知道 append-to-body 的默认值为false。我们只需要看一下没加 :append-to-body="true" 时元素的位置就能够明白为什么会出现el-dialog组件内容在阴影下面的情况。

 阴影部分的元素可见是与 #app 同级别

而我们的弹窗虽然 z-index 更高，但位置是在我们写 dialog 弹窗的组件里面。也就是与阴影部分不一个层级，只要 dialog 的祖先元素有定位且 z-index 低于 2000 ，所以就会显示到阴影部分下面