/* 页面主体设置：确保最小高度为视口高度，并设置为相对定位以便子元素定位 */
body {
    min-height: 100vh;
    position: relative;
}

/* 粒子效果容器：固定在视口顶部，作为背景层 */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 置于最底层作为背景 */
}

/* 主要内容区域：确保所有内容层显示在粒子背景之上 */
.b-example-divider,
header,
main,
footer {
    position: relative;
    z-index: 1; /* 基础内容层级 */
}

/* 下拉菜单特殊处理：需要显示在最顶层，避免被其他元素遮挡 */
.dropdown-menu {
    z-index: 1050; /* 高于Bootstrap默认值1000，确保悬浮层可见性 */
}

/* 头部导航栏层级优化：保持在粒子层之上，但低于下拉菜单 */
header {
    z-index: 1030; /* 介于粒子背景(-1)和下拉菜单(1050)之间 */
}