关于修改vue组件的z-index属性，但不起作用的解决方法

问题起因：我在我的界面中嵌入vue-3d-loader组件来展示三维模型，这个组件的默认z-index为10000（值越大越在前面），因此我在调用它的时候整个三维模型一直在界面最前面，导致其他的组件无法选中和操作。于是我想着修改一下这个组件的z-index值，所采用的步骤是：

1.找到包含 Vue-3D-loader 组件的父元素div，在div元素上添加一个类my-wrapper

<div class="my-wrapper" >

<vue3dLoader ...... />

</div>

2.在style块中添加样式规则，将 z-index 设置为你想要的新值：

.my-wrapper{

        z-index: 20;  //设置一个比较小的值，让其显示在底下

}

然而，却一直没有起作用。

后来，经过一番查找，才发现是父元素<div>的定位方式没有定义。于是将上面的代码改成：

.my-wrapper{

        position: relative; //相对定位

        z-index: 20; 

}

这样修改之后，设置的z-index就起作用了。其他的组件如按钮、对话框也可以用这种方式来设置。

最后，再附上其他大佬关于不同定位方式的解读：

【前端】CSS中的相对定位，绝对定位和固定定位_前端相对定位和绝对定位_苦逼的虾的博客-CSDN博客