/* z-index赋值规范
1~99：都是页面内比较正常的元素
100~199：弹窗的灰色遮罩背景之类的组件，或者是能够遮住全屏的加载动画
200~299：弹窗面板，比如突然弹出来一个界面提示框，登录框、警告框之类的
300~1000：页面交互层：比如在这个界面，会有一个点击一下就能让屏幕上多出来一个小桃心的点赞动画，z-index必须很高，比弹窗组件还要高。
建议尽量避免设置过大的z-index值，以避免可能出现的层叠顺序混乱或其他问题。通常来说，一个较为保守的做法是将z-index值限制在较小的范围内，例如1000以下。 ---chartgpt */
:root {
    /* 页面内比较常规的元素 start， */
    --z-basic: 0;
    --z-normal: 0;
    --z-relative: 1;
    --z-before: 1;
    --z-after: 1;
    --z-absolute: 2;
    --z-fixed: 99; /*吸顶,吸底元素 */
    --z-sticky: 99; /*吸顶,吸底元素 */
    /* 页面内比较常规的元素 end*/

    /* 弹窗的灰色遮罩背景之类的组件，或者是能够遮住全屏的加载动画 start*/
    --z-modal: 100; /* 弹窗的灰色遮罩背景 */
    --z-mask: 100;  /* 弹窗的灰色遮罩背景 */
    --z-loading: 101;
    /* 弹窗的灰色遮罩背景之类的组件，或者是能够遮住全屏的加载动画 end* /
    
    /* 页面交互层, 水印等start*/
    --z-basic-action: 300; /* 基础交互 */
    --z-lottie-like: 300; /* 已知点赞动画 */
    --z-watermark: 999; /* 已知水印 */
    /* 页面交互层 end*/
    
    /* 达摩vue3组件库 start*/
    --z-toast: 102;
    --z-dialog: 101;
    --z-alert: 101;
    --z-confirm: 101;
    /* 达摩vue3组件库 end*/
}