如何将header元素置于SVG背景上方并居中，保留沉浸式效果与box_shadow_header类

尝试将header元素放置在SVG背景之上，同时让沉浸式SVG背景保持动态效果，但未能实现。请问是否有办法将header元素居中于SVG背景，同时保留沉浸式背景效果和box_shadow_header类？

要实现需求，只需调整定位和布局规则，核心是让header脱离文档流悬浮在SVG背景上方，同时确保SVG容器铺满视口。以下是具体修改：

修改要点 #

• Header定位：添加绝对定位和居中样式，设置z-index确保在SVG上层
• SVG容器布局：设置容器铺满整个section，用flex布局让图标均匀分布
• 保留原有样式：完全保留box_shadow_header类和SVG的hover动态效果

修改后的完整代码 #

CSS部分 #

section {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #28407D;
    overflow: hidden;
}
section .row {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    font-size: 64px;
}
svg:hover {
    transition: 0s;
    color: #B09B45;
    text-shadow: 0 120px 120px #B09B45;
}
svg {
    color: #3450B6;
    transition: 1s;
    padding: 0 5px;
    user-select: none;
    cursor: default; 
}

/* Style rules for header content*/
header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 3em;
    color: white;
    z-index: 10;
}

header h1 {
    font-family: 'Bagel Fat One', cursive;
    font-family: 'Tilt Prism', cursive;
    font-weight: bold;
}
header h3 {
    font-family: 'Bagel Fat One', cursive;
    font-family: 'Tilt Prism', cursive;
    font-weight: bold;
    font-style: italic;
}
.box_shadow_header {
    background-color: #28407D;
    color: white;
    padding: 10px;
    margin: 1px 1px 1px 1px;
    border-radius: 4px;
    box-shadow: 2px 2px 20px 23px #3450B6;
}

HTML部分 #

<section>
    <header class="box_shadow_header">
        <h1>Brew City</h1>
        <h3>Brew. Share. Drink Responsibly.</h3>
    </header>
    <div class="row">
        <!-- 复制多个SVG以填充背景，增强沉浸感 -->
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1600 512q66 0 124 25t101 69t69 102t26 124v512q0 66-25 124t-69 102t-102 69t-124 25h-64v192q0 40-15 75t-41 61t-61 41t-75 15H320q-40 0-75-15t-61-41t-41-61t-15-75V477q-59-34-93-93T0 256q0-52 20-99t54-81t81-55t99-21h1154q53 0 99 20t82 55t55 81t20 100q0 35-9 69t-26 64t-41 56t-52 43v24h64zM255 128q-26 0-49 10t-41 27t-27 41t-10 50q0 40 23 73t62 47l43 15v569q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15q40 0 75 15t61 41t41 61t15 75v256q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15h371q33-16 55-52t22-76q0-27-10-50t-27-40t-41-28t-50-10H255zm1153 1728v-76q-15 5-31 8t-33 4H320q-17 0-33-3t-31-9v76q0 26 19 45t45 19h1024q26 0 45-19t19-45zm-64-192q26 0 45-19t19-45V512h-320q-26 0-45 19t-19 45v256q0 40-15 75t-41 61t-61 41t-75 15q-40 0-75-15t-61-41t-41-61t-15-75V576q0-26-19-45t-45-19q-26 0-45 19t-19 45v384q0 40-15 75t-41 61t-61 41t-75 15q-33 0-64-11v459q0 26 19 45t45 19h192v-448q0-27 19-45t45-19q26 0 45 18t19 46v448h384v-576q0-27 19-45t45-19q26 0 45 18t19 46v576h192zm448-320V832q0-40-15-75t-41-61t-61-41t-75-15h-64v896h64q40 0 75-15t61-41t41-61t15-75z"/></svg>
        </div>
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1600 512q66 0 124 25t101 69t69 102t26 124v512q0 66-25 124t-69 102t-102 69t-124 25h-64v192q0 40-15 75t-41 61t-61 41t-75 15H320q-40 0-75-15t-61-41t-41-61t-15-75V477q-59-34-93-93T0 256q0-52 20-99t54-81t81-55t99-21h1154q53 0 99 20t82 55t55 81t20 100q0 35-9 69t-26 64t-41 56t-52 43v24h64zM255 128q-26 0-49 10t-41 27t-27 41t-10 50q0 40 23 73t62 47l43 15v569q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15q40 0 75 15t61 41t41 61t15 75v256q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15h371q33-16 55-52t22-76q0-27-10-50t-27-40t-41-28t-50-10H255zm1153 1728v-76q-15 5-31 8t-33 4H320q-17 0-33-3t-31-9v76q0 26 19 45t45 19h1024q26 0 45-19t19-45zm-64-192q26 0 45-19t19-45V512h-320q-26 0-45 19t-19 45v256q0 40-15 75t-41 61t-61 41t-75 15q-40 0-75-15t-61-41t-41-61t-15-75V576q0-26-19-45t-45-19q-26 0-45 19t-19 45v384q0 40-15 75t-41 61t-61 41t-75 15q-33 0-64-11v459q0 26 19 45t45 19h192v-448q0-27 19-45t45-19q26 0 45 18t19 46v448h384v-576q0-27 19-45t45-19q26 0 45 18t19 46v576h192zm448-320V832q0-40-15-75t-41-61t-61-41t-75-15h-64v896h64q40 0 75-15t61-41t41-61t15-75z"/></svg>
        </div>
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1600 512q66 0 124 25t101 69t69 102t26 124v512q0 66-25 124t-69 102t-102 69t-124 25h-64v192q0 40-15 75t-41 61t-61 41t-75 15H320q-40 0-75-15t-61-41t-41-61t-15-75V477q-59-34-93-93T0 256q0-52 20-99t54-81t81-55t99-21h1154q53 0 99 20t82 55t55 81t20 100q0 35-9 69t-26 64t-41 56t-52 43v24h64zM255 128q-26 0-49 10t-41 27t-27 41t-10 50q0 40 23 73t62 47l43 15v569q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15q40 0 75 15t61 41t41 61t15 75v256q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15h371q33-16 55-52t22-76q0-27-10-50t-27-40t-41-28t-50-10H255zm1153 1728v-76q-15 5-31 8t-33 4H320q-17 0-33-3t-31-9v76q0 26 19 45t45 19h1024q26 0 45-19t19-45zm-64-192q26 0 45-19t19-45V512h-320q-26 0-45 19t-19 45v256q0 40-15 75t-41 61t-61 41t-75 15q-40 0-75-15t-61-41t-41-61t-15-75V576q0-26-19-45t-45-19q-26 0-45 19t-19 45v384q0 40-15 75t-41 61t-61 41t-75 15q-33 0-64-11v459q0 26 19 45t45 19h192v-448q0-27 19-45t45-19q26 0 45 18t19 46v448h384v-576q0-27 19-45t45-19q26 0 45 18