Question

我正在尝试构建一个布局。我的导航栏和右上角的元素涵盖了导航。我希望导航位于该元素的顶部。

The navigation is behind the blob in this image

斑点有一类英雄斑点__1

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    background-color: #fff;
    color: #272c51;
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    height: 100vh;
}

/* ----------------------------------------------- */
/*  REUSABLE COMPONENTS */
/* ----------------------------------------------- */

.row {
    max-width: 1500px;
    margin: 0 auto;
}

/* ----- HEADINGS ----- */

/* ----- BUTTONS ----- */

.btn:link,
.btn:visited {
    border: 1px solid #272c51;
    padding: 10px;
    border-radius: 200px;
    text-decoration: none;
    color: #272c51;;
}

/* ----------------------------------------------- */
/*  HEADER */
/* ----------------------------------------------- */

header {
    position: relative;
    z-index: 3;
}

/* -----  Navigation ----- */

/* -----  Logo ----- */
.logo-happytools .logo-icon .red {
    fill: #ff5831;
}

nav {
    margin-top: 40px;
}

.logo-happytools {
    width: 260px;
    height: 34px;
}

.main-nav {
    float: right;
    list-style: none;
    margin: 0;
}

.main-nav li {
    display: inline-block;
    list-style-type: none;
    margin-left: 20px;
}

.main-nav li a:link,
.main-nav li a:visited {
    color: #272c51;
    font-size: 75%;
    text-decoration: none;
}

/* -----  Blobs ----- */

.hero-blobs {
    z-index: -1;   
}

.hero-blobs__1 {
    top: -13rem;
    right: -4rem;
    position: absolute;
    width: 539px;
    height: 530px;

}

.hero-blobs__2 {
    top: 9rem;
    left: -16rem;
    position: absolute;
    width: 604px;
    height: 684px;
}

.hero-blobs__3 {
    position: absolute;
    width: 633px;
    height: 582px;
    top: 9.5rem;
    right: -19rem;
}

.hero-blobs__1 .blob-shape {
    fill: #abd8d5;
}

.hero-blobs__2 .blob-shape {
    fill: #ff5731;
}

.hero-blobs__3 .blob-shape {
    fill: #f7ef89;
}

<header>
    <div class="hero-blobs">
            <div class="hero-blobs__1">
                <svg xmlns="http://www.w3.org/2000/svg" width="539" height="530" viewBox="0 0 539 530">
                    <path class="blob-shape" d="M483.81445,93.2628175 C508.603575,140.574921 513.424328,194.456998 523.257093,247.929027 C532.951743,301.480915 547.629189,354.731795 531.132293,394.954837 C514.60618,435.286918 466.796825,462.56198 421.016717,478.343429 C375.236609,494.124877 331.406064,498.274494 281.413423,509.304306 C231.558898,520.254259 175.404161,538.164268 130.301364,523.975396 C85.1985674,509.786523 51.0095945,463.578629 28.1647181,412.930859 C5.42874066,362.312268 -6.07203928,307.224621 3.24283549,256.779572 C12.4780281,206.196305 42.3110773,160.197278 80.1123446,128.020074 C118.022511,95.8720504 163.821213,77.4076323 213.232179,52.4315996 C262.781262,27.3757075 316.051507,-4.16261962 365.119827,0.453872205 C414.188148,5.07036403 458.916427,45.9215343 483.81445,93.2628175 Z"></path>
                </svg>
            </div>
            <div class="hero-blobs__2">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 604 684">
                    <path class="blob-shape" d="M436.870506,123.046875 C497.193173,171.241009 591.918669,216.526451 602.167666,281.859532 C612.270249,347.046127 579.180631,418.971111 537.745401,481.374457 C496.310171,543.92429 446.52933,597.098973 379.471608,635.771469 C312.413887,674.590453 228.079285,698.90725 163.071363,673.711532 C97.9170265,648.662302 51.9429555,574.100557 27.6381918,501.736112 C3.33342805,429.225182 0.697971745,359.058038 0.112314788,276.439523 C-0.619756407,193.674521 0.844385984,98.6046341 48.4290137,48.2131994 C96.0136414,-2.17823544 189.718754,-8.0377046 270.246586,7.78286214 C350.774418,23.7499156 376.54784,74.8527411 436.870506,123.046875 Z"></path>
                </svg>
            </div>
            <div class="hero-blobs__3">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 633 582">
                    <path class="blob-shape" d="M569.981008,10.7550543 C621.417854,38.2285083 636.37871,124.777006 632.389148,200.079893 C628.257103,275.525129 605.17464,339.582406 572.260758,399.369197 C539.204391,459.013638 496.316605,514.102896 435.618277,547.982078 C375.062433,581.861259 296.696047,594.388016 237.565046,567.199261 C178.434046,540.010505 138.395947,473.390938 91.0911462,404.493779 C43.7863458,335.738969 -10.9276402,264.706567 1.89595028,207.909116 C14.5770564,151.254014 94.9382234,108.691512 162.903253,84.2073977 C231.010767,59.5809338 286.864627,53.0328566 358.676734,33.9580233 C430.631325,14.8831899 518.544162,-16.7183997 569.981008,10.7550543 Z"></path>
                </svg>
            </div>
        </div>
    <nav>
        <div class="row">
                <svg xmlns="http://www.w3.org/2000/svg" width="260" height="33" viewBox="0 0 260 33"
                        class="logo-happytools">
                    <title id="logo-title">Happy Tools</title>
                    <g class="logo-wordmark" transform="translate(51.002538, 4.212849)">
                        <polygon points="12.437 9.303 5.237 9.303 5.237 .462 0 .462 0 23.554 5.237 23.554 5.237 14.383 12.437 14.383 12.437 23.554 17.674 23.554 17.674 .462 12.437 .462"/>
                        <path d="M28.0837848 14.9766683L30.7685316 6.49905854 33.4516329 14.9766683 28.0837848 14.9766683zM27.4296709.461985366L19.6395443 23.5537902 25.3677722 23.5537902 26.5130886 19.9249122 35.0231519 19.9249122 36.1684684 23.5537902 41.8958734 23.5537902 34.1065696.461985366 27.4296709.461985366zM52.535057 11.3482049L49.0982848 11.3482049 49.0982848 5.40981463 52.535057 5.40981463C54.1386646 5.40981463 55.3168924 6.69683902 55.3168924 8.37859512 55.3168924 10.0611805 54.1386646 11.3482049 52.535057 11.3482049M52.535057.4624L43.8612595.4624 43.8612595 23.5533756 49.0982848 23.5533756 49.0982848 16.2964488 52.535057 16.2964488C57.0513228 16.2964488 60.5539177 12.7662537 60.5539177 8.37859512 60.5539177 3.99176585 57.0513228.4624 52.535057.4624M71.8472152 11.3482049L68.410443 11.3482049 68.410443 5.40981463 71.8472152 5.40981463C73.4508228 5.40981463 74.6290506 6.69683902 74.6290506 8.37859512 74.6290506 10.0611805 73.4508228 11.3482049 71.8472152 11.3482049M71.8472152.4624L63.1734177.4624 63.1734177 23.5533756 68.410443 23.5533756 68.410443 16.2964488 71.8472152 16.2964488C76.363481 16.2964488 79.8660759 12.7662537 79.8660759 8.37859512 79.8660759 3.99176585 76.363481.4624 71.8472152.4624"/>
                        <polygon points="90.177 9.369 85.825 .462 79.868 .462 87.559 14.68 87.559 23.553 92.796 23.553 92.796 14.68 100.488 .462 94.531 .462"/>
                        <polygon points="107.036 5.542 112.928 5.542 112.928 23.554 118.164 23.554 118.164 5.542 124.056 5.542 124.056 .462 107.036 .462"/>
                        <path d="M135.97062 18.8691707C132.240114 18.8691707 129.294544 16.1317561 129.294544 12.0078049 129.294544 7.88385366 132.240114 5.14643902 135.97062 5.14643902 139.701949 5.14643902 142.647519 7.88385366 142.647519 12.0078049 142.647519 16.1317561 139.701949 18.8691707 135.97062 18.8691707M135.97062 1.95399252e-14C129.392456 1.95399252e-14 124.057519 5.21195122 124.057519 12.0078049 124.057519 18.8028293 129.392456 24.0156098 135.97062 24.0156098 142.549608 24.0156098 147.884544 18.8028293 147.884544 12.0078049 147.884544 5.21195122 142.549608 1.95399252e-14 135.97062 1.95399252e-14M161.763772 18.8691707C158.033266 18.8691707 155.087696 16.1317561 155.087696 12.0078049 155.087696 7.88385366 158.033266 5.14643902 161.763772 5.14643902 165.495101 5.14643902 168.440671 7.88385366 168.440671 12.0078049 168.440671 16.1317561 165.495101 18.8691707 161.763772 18.8691707M161.763772 1.95399252e-14C155.185608 1.95399252e-14 149.850671 5.21195122 149.850671 12.0078049 149.850671 18.8028293 155.185608 24.0156098 161.763772 24.0156098 168.342759 24.0156098 173.677696 18.8028293 173.677696 12.0078049 173.677696 5.21195122 168.342759 1.95399252e-14 161.763772 1.95399252e-14"/>
                        <polygon points="181.863 .462 176.626 .462 176.626 23.554 190.044 23.554 190.044 18.474 181.863 18.474"/>
                        <path d="M197.050051,6.89453659 C197.050051,5.97073171 197.868722,5.14643902 199.505241,5.14643902 C201.600051,5.14643902 202.679544,6.16892683 203.465304,7.81834146 L207.883658,5.21195122 C206.215051,1.81443902 203.269481,1.95399252e-14 199.505241,1.95399252e-14 C195.544354,1.95399252e-14 191.813848,2.57321951 191.813848,7.02639024 C191.813848,11.4472195 195.152709,13.0966341 198.555747,14.0527805 C201.992519,15.0097561 203.30157,15.5703415 203.30157,16.9892195 C203.30157,17.8798537 202.679544,18.8691707 200.193089,18.8691707 C197.607076,18.8691707 196.199291,17.5829756 195.381443,15.6698537 L190.864354,18.3085854 C192.141316,21.7060976 195.217709,24.0156098 200.028532,24.0156098 C205.003911,24.0156098 208.538595,21.3760488 208.538595,16.922878 C208.538595,12.0409756 204.644354,10.8202927 201.174671,9.76463415 C197.607076,8.67663415 197.050051,7.95019512 197.050051,6.89453659 Z"/>
                    </g>
                    <g class="logo-icon" transform="translate(0.455000, 0.247122)">
                        <path class="red" d="M-9.76996262e-14,17.4367211 C1.65382941,17.8235598 3.33067651,17.7115835 4.94329114,17.101463 L4.94329114,25.1897707 C4.94329114,26.575478 6.05734177,27.6991366 7.43221519,27.6991366 L20.6234369,27.6991366 L23.2606811,32.6814634 L26.2229747,32.6814634 L6.20297468,32.6814634 C2.79170886,32.6814634 1.82919783e-13,29.8685854 1.82919783e-13,26.4296098 L1.82919783e-13,17.4367211 L-9.76996262e-14,17.4367211 Z"/>
                        <path class="green" fill="#ABD8D4" d="M23.7354735,4.98216098 L7.43221519,4.98216098 C6.05734177,4.98216098 4.94329114,6.10581951 4.94329114,7.49152683 L4.94329114,17.101463 C3.33067651,17.7115835 1.65382941,17.8235598 -5.5067062e-14,17.4367211 L-5.04996888e-14,6.25185366 C-5.04996888e-14,2.81370732 2.79170886,-8.8817842e-15 6.20297468,-8.8817842e-15 L23.8416508,-8.8817842e-15 C23.3957774,1.52406008 23.3468797,3.20272652 23.7354735,4.98216098 L23.7354735,4.98216098 Z"/>
                        <path class="yellow" fill="#F7EF89" d="M20.6234369,27.6991366 L24.9929114,27.6991366 C26.3677848,27.6991366 27.4826582,26.575478 27.4826582,25.1897707 L27.4826582,4.98216098 L23.7354735,4.98216098 C23.3468797,3.20272652 23.3957774,1.52406008 23.8416508,2.06501483e-14 L32.4251266,2.06501483e-14 L32.4251266,26.4296098 C32.4251266,29.8685854 29.6342405,32.6814634 26.2229747,32.6814634 L23.2606811,32.6814634 C22.3867548,31.8237763 21.0043374,30.126914 20.6234369,27.6991366 L20.6234369,27.6991366 Z"/>
                    </g>
                </svg>
            <ul class="main-nav">
                <li><a href="#">Products</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Help</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </nav>
</header>

Answer 1

您只需要使用z-index属性，即可将<nav>元素置于SVG之上。请注意，您需要将position属性设置为relative才能产生明显的效果：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    background-color: #fff;
    color: #272c51;
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    height: 100vh;
}

/* ----------------------------------------------- */
/*  REUSABLE COMPONENTS */
/* ----------------------------------------------- */

.row {
    max-width: 1500px;
    margin: 0 auto;
}

/* ----- HEADINGS ----- */

/* ----- BUTTONS ----- */

.btn:link,
.btn:visited {
    border: 1px solid #272c51;
    padding: 10px;
    border-radius: 200px;
    text-decoration: none;
    color: #272c51;;
}

/* ----------------------------------------------- */
/*  HEADER */
/* ----------------------------------------------- */

header {
    position: relative;
    z-index: 3;
}

/* -----  Navigation ----- */

/* -----  Logo ----- */
.logo-happytools .logo-icon .red {
    fill: #ff5831;
}

nav {
    margin-top: 40px;
    z-index: 10;
    position: relative;
}

.logo-happytools {
    width: 260px;
    height: 34px;
}

.main-nav {
    float: right;
    list-style: none;
    margin: 0;
}

.main-nav li {
    display: inline-block;
    list-style-type: none;
    margin-left: 20px;
}

.main-nav li a:link,
.main-nav li a:visited {
    color: #272c51;
    font-size: 75%;
    text-decoration: none;
}

/* -----  Blobs ----- */

.hero-blobs {
    z-index: -1;   
}

.hero-blobs__1 {
    top: -13rem;
    right: -4rem;
    position: absolute;
    width: 539px;
    height: 530px;

}

.hero-blobs__2 {
    top: 9rem;
    left: -16rem;
    position: absolute;
    width: 604px;
    height: 684px;
}

.hero-blobs__3 {
    position: absolute;
    width: 633px;
    height: 582px;
    top: 9.5rem;
    right: -19rem;
}

.hero-blobs__1 .blob-shape {
    fill: #abd8d5;
}

.hero-blobs__2 .blob-shape {
    fill: #ff5731;
}

.hero-blobs__3 .blob-shape {
    fill: #f7ef89;
}

<header>
    <div class="hero-blobs">
            <div class="hero-blobs__1">
                <svg xmlns="http://www.w3.org/2000/svg" width="539" height="530" viewBox="0 0 539 530">
                    <path class="blob-shape" d="M483.81445,93.2628175 C508.603575,140.574921 513.424328,194.456998 523.257093,247.929027 C532.951743,301.480915 547.629189,354.731795 531.132293,394.954837 C514.60618,435.286918 466.796825,462.56198 421.016717,478.343429 C375.236609,494.124877 331.406064,498.274494 281.413423,509.304306 C231.558898,520.254259 175.404161,538.164268 130.301364,523.975396 C85.1985674,509.786523 51.0095945,463.578629 28.1647181,412.930859 C5.42874066,362.312268 -6.07203928,307.224621 3.24283549,256.779572 C12.4780281,206.196305 42.3110773,160.197278 80.1123446,128.020074 C118.022511,95.8720504 163.821213,77.4076323 213.232179,52.4315996 C262.781262,27.3757075 316.051507,-4.16261962 365.119827,0.453872205 C414.188148,5.07036403 458.916427,45.9215343 483.81445,93.2628175 Z"></path>
                </svg>
            </div>
            <div class="hero-blobs__2">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 604 684">
                    <path class="blob-shape" d="M436.870506,123.046875 C497.193173,171.241009 591.918669,216.526451 602.167666,281.859532 C612.270249,347.046127 579.180631,418.971111 537.745401,481.374457 C496.310171,543.92429 446.52933,597.098973 379.471608,635.771469 C312.413887,674.590453 228.079285,698.90725 163.071363,673.711532 C97.9170265,648.662302 51.9429555,574.100557 27.6381918,501.736112 C3.33342805,429.225182 0.697971745,359.058038 0.112314788,276.439523 C-0.619756407,193.674521 0.844385984,98.6046341 48.4290137,48.2131994 C96.0136414,-2.17823544 189.718754,-8.0377046 270.246586,7.78286214 C350.774418,23.7499156 376.54784,74.8527411 436.870506,123.046875 Z"></path>
                </svg>
            </div>
            <div class="hero-blobs__3">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 633 582">
                    <path class="blob-shape" d="M569.981008,10.7550543 C621.417854,38.2285083 636.37871,124.777006 632.389148,200.079893 C628.257103,275.525129 605.17464,339.582406 572.260758,399.369197 C539.204391,459.013638 496.316605,514.102896 435.618277,547.982078 C375.062433,581.861259 296.696047,594.388016 237.565046,567.199261 C178.434046,540.010505 138.395947,473.390938 91.0911462,404.493779 C43.7863458,335.738969 -10.9276402,264.706567 1.89595028,207.909116 C14.5770564,151.254014 94.9382234,108.691512 162.903253,84.2073977 C231.010767,59.5809338 286.864627,53.0328566 358.676734,33.9580233 C430.631325,14.8831899 518.544162,-16.7183997 569.981008,10.7550543 Z"></path>
                </svg>
            </div>
        </div>
    <nav>
        <div class="row">
                <svg xmlns="http://www.w3.org/2000/svg" width="260" height="33" viewBox="0 0 260 33"
                        class="logo-happytools">
                    <title id="logo-title">Happy Tools</title>
                    <g class="logo-wordmark" transform="translate(51.002538, 4.212849)">
                        <polygon points="12.437 9.303 5.237 9.303 5.237 .462 0 .462 0 23.554 5.237 23.554 5.237 14.383 12.437 14.383 12.437 23.554 17.674 23.554 17.674 .462 12.437 .462"/>
                        <path d="M28.0837848 14.9766683L30.7685316 6.49905854 33.4516329 14.9766683 28.0837848 14.9766683zM27.4296709.461985366L19.6395443 23.5537902 25.3677722 23.5537902 26.5130886 19.9249122 35.0231519 19.9249122 36.1684684 23.5537902 41.8958734 23.5537902 34.1065696.461985366 27.4296709.461985366zM52.535057 11.3482049L49.0982848 11.3482049 49.0982848 5.40981463 52.535057 5.40981463C54.1386646 5.40981463 55.3168924 6.69683902 55.3168924 8.37859512 55.3168924 10.0611805 54.1386646 11.3482049 52.535057 11.3482049M52.535057.4624L43.8612595.4624 43.8612595 23.5533756 49.0982848 23.5533756 49.0982848 16.2964488 52.535057 16.2964488C57.0513228 16.2964488 60.5539177 12.7662537 60.5539177 8.37859512 60.5539177 3.99176585 57.0513228.4624 52.535057.4624M71.8472152 11.3482049L68.410443 11.3482049 68.410443 5.40981463 71.8472152 5.40981463C73.4508228 5.40981463 74.6290506 6.69683902 74.6290506 8.37859512 74.6290506 10.0611805 73.4508228 11.3482049 71.8472152 11.3482049M71.8472152.4624L63.1734177.4624 63.1734177 23.5533756 68.410443 23.5533756 68.410443 16.2964488 71.8472152 16.2964488C76.363481 16.2964488 79.8660759 12.7662537 79.8660759 8.37859512 79.8660759 3.99176585 76.363481.4624 71.8472152.4624"/>
                        <polygon points="90.177 9.369 85.825 .462 79.868 .462 87.559 14.68 87.559 23.553 92.796 23.553 92.796 14.68 100.488 .462 94.531 .462"/>
                        <polygon points="107.036 5.542 112.928 5.542 112.928 23.554 118.164 23.554 118.164 5.542 124.056 5.542 124.056 .462 107.036 .462"/>
                        <path d="M135.97062 18.8691707C132.240114 18.8691707 129.294544 16.1317561 129.294544 12.0078049 129.294544 7.88385366 132.240114 5.14643902 135.97062 5.14643902 139.701949 5.14643902 142.647519 7.88385366 142.647519 12.0078049 142.647519 16.1317561 139.701949 18.8691707 135.97062 18.8691707M135.97062 1.95399252e-14C129.392456 1.95399252e-14 124.057519 5.21195122 124.057519 12.0078049 124.057519 18.8028293 129.392456 24.0156098 135.97062 24.0156098 142.549608 24.0156098 147.884544 18.8028293 147.884544 12.0078049 147.884544 5.21195122 142.549608 1.95399252e-14 135.97062 1.95399252e-14M161.763772 18.8691707C158.033266 18.8691707 155.087696 16.1317561 155.087696 12.0078049 155.087696 7.88385366 158.033266 5.14643902 161.763772 5.14643902 165.495101 5.14643902 168.440671 7.88385366 168.440671 12.0078049 168.440671 16.1317561 165.495101 18.8691707 161.763772 18.8691707M161.763772 1.95399252e-14C155.185608 1.95399252e-14 149.850671 5.21195122 149.850671 12.0078049 149.850671 18.8028293 155.185608 24.0156098 161.763772 24.0156098 168.342759 24.0156098 173.677696 18.8028293 173.677696 12.0078049 173.677696 5.21195122 168.342759 1.95399252e-14 161.763772 1.95399252e-14"/>
                        <polygon points="181.863 .462 176.626 .462 176.626 23.554 190.044 23.554 190.044 18.474 181.863 18.474"/>
                        <path d="M197.050051,6.89453659 C197.050051,5.97073171 197.868722,5.14643902 199.505241,5.14643902 C201.600051,5.14643902 202.679544,6.16892683 203.465304,7.81834146 L207.883658,5.21195122 C206.215051,1.81443902 203.269481,1.95399252e-14 199.505241,1.95399252e-14 C195.544354,1.95399252e-14 191.813848,2.57321951 191.813848,7.02639024 C191.813848,11.4472195 195.152709,13.0966341 198.555747,14.0527805 C201.992519,15.0097561 203.30157,15.5703415 203.30157,16.9892195 C203.30157,17.8798537 202.679544,18.8691707 200.193089,18.8691707 C197.607076,18.8691707 196.199291,17.5829756 195.381443,15.6698537 L190.864354,18.3085854 C192.141316,21.7060976 195.217709,24.0156098 200.028532,24.0156098 C205.003911,24.0156098 208.538595,21.3760488 208.538595,16.922878 C208.538595,12.0409756 204.644354,10.8202927 201.174671,9.76463415 C197.607076,8.67663415 197.050051,7.95019512 197.050051,6.89453659 Z"/>
                    </g>
                    <g class="logo-icon" transform="translate(0.455000, 0.247122)">
                        <path class="red" d="M-9.76996262e-14,17.4367211 C1.65382941,17.8235598 3.33067651,17.7115835 4.94329114,17.101463 L4.94329114,25.1897707 C4.94329114,26.575478 6.05734177,27.6991366 7.43221519,27.6991366 L20.6234369,27.6991366 L23.2606811,32.6814634 L26.2229747,32.6814634 L6.20297468,32.6814634 C2.79170886,32.6814634 1.82919783e-13,29.8685854 1.82919783e-13,26.4296098 L1.82919783e-13,17.4367211 L-9.76996262e-14,17.4367211 Z"/>
                        <path class="green" fill="#ABD8D4" d="M23.7354735,4.98216098 L7.43221519,4.98216098 C6.05734177,4.98216098 4.94329114,6.10581951 4.94329114,7.49152683 L4.94329114,17.101463 C3.33067651,17.7115835 1.65382941,17.8235598 -5.5067062e-14,17.4367211 L-5.04996888e-14,6.25185366 C-5.04996888e-14,2.81370732 2.79170886,-8.8817842e-15 6.20297468,-8.8817842e-15 L23.8416508,-8.8817842e-15 C23.3957774,1.52406008 23.3468797,3.20272652 23.7354735,4.98216098 L23.7354735,4.98216098 Z"/>
                        <path class="yellow" fill="#F7EF89" d="M20.6234369,27.6991366 L24.9929114,27.6991366 C26.3677848,27.6991366 27.4826582,26.575478 27.4826582,25.1897707 L27.4826582,4.98216098 L23.7354735,4.98216098 C23.3468797,3.20272652 23.3957774,1.52406008 23.8416508,2.06501483e-14 L32.4251266,2.06501483e-14 L32.4251266,26.4296098 C32.4251266,29.8685854 29.6342405,32.6814634 26.2229747,32.6814634 L23.2606811,32.6814634 C22.3867548,31.8237763 21.0043374,30.126914 20.6234369,27.6991366 L20.6234369,27.6991366 Z"/>
                    </g>
                </svg>
            <ul class="main-nav">
                <li><a href="#">Products</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Help</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </nav>
</header>

Answer 2

z-index仅适用于定位的元素，请参见here。将position: relative;添加到您的英雄补丁中即可解决此问题：

.hero-blobs {
    position: relative;
    z-index: -1;   
}

如果没有其他理由将您的z-index设为-1，则可以将其全部删除，然后将CSS替换为：

.hero-blobs {
    position: absolute;
}

* BASIC SETUP / / ----------------------------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    background-color: #fff;
    color: #272c51;
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    height: 100vh;
}

/* ----------------------------------------------- */
/*  REUSABLE COMPONENTS */
/* ----------------------------------------------- */

.row {
    max-width: 1500px;
    margin: 0 auto;
}

/* ----- HEADINGS ----- */

/* ----- BUTTONS ----- */

.btn:link,
.btn:visited {
    border: 1px solid #272c51;
    padding: 10px;
    border-radius: 200px;
    text-decoration: none;
    color: #272c51;;
}

/* ----------------------------------------------- */
/*  HEADER */
/* ----------------------------------------------- */

header {
    position: relative;
    z-index: 3;
}

/* -----  Navigation ----- */

/* -----  Logo ----- */
.logo-happytools .logo-icon .red {
    fill: #ff5831;
}

nav {
    margin-top: 40px;
}

.logo-happytools {
    width: 260px;
    height: 34px;
}

.main-nav {
    float: right;
    list-style: none;
    margin: 0;
}

.main-nav li {
    display: inline-block;
    list-style-type: none;
    margin-left: 20px;
}

.main-nav li a:link,
.main-nav li a:visited {
    color: #272c51;
    font-size: 75%;
    text-decoration: none;
}

/* -----  Blobs ----- */

.hero-blobs {
    position: absolute;
}

.hero-blobs__1 {
    top: -13rem;
    right: -4rem;
    position: absolute;
    width: 539px;
    height: 530px;

}

.hero-blobs__2 {
    top: 9rem;
    left: -16rem;
    position: absolute;
    width: 604px;
    height: 684px;
}

.hero-blobs__3 {
    position: absolute;
    width: 633px;
    height: 582px;
    top: 9.5rem;
    right: -19rem;
}

.hero-blobs__1 .blob-shape {
    fill: #abd8d5;
}

.hero-blobs__2 .blob-shape {
    fill: #ff5731;
}

.hero-blobs__3 .blob-shape {
    fill: #f7ef89;
}

<header>
    <div class="hero-blobs">
            <div class="hero-blobs__1">
                <svg xmlns="http://www.w3.org/2000/svg" width="539" height="530" viewBox="0 0 539 530">
                    <path class="blob-shape" d="M483.81445,93.2628175 C508.603575,140.574921 513.424328,194.456998 523.257093,247.929027 C532.951743,301.480915 547.629189,354.731795 531.132293,394.954837 C514.60618,435.286918 466.796825,462.56198 421.016717,478.343429 C375.236609,494.124877 331.406064,498.274494 281.413423,509.304306 C231.558898,520.254259 175.404161,538.164268 130.301364,523.975396 C85.1985674,509.786523 51.0095945,463.578629 28.1647181,412.930859 C5.42874066,362.312268 -6.07203928,307.224621 3.24283549,256.779572 C12.4780281,206.196305 42.3110773,160.197278 80.1123446,128.020074 C118.022511,95.8720504 163.821213,77.4076323 213.232179,52.4315996 C262.781262,27.3757075 316.051507,-4.16261962 365.119827,0.453872205 C414.188148,5.07036403 458.916427,45.9215343 483.81445,93.2628175 Z"></path>
                </svg>
            </div>
            <div class="hero-blobs__2">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 604 684">
                    <path class="blob-shape" d="M436.870506,123.046875 C497.193173,171.241009 591.918669,216.526451 602.167666,281.859532 C612.270249,347.046127 579.180631,418.971111 537.745401,481.374457 C496.310171,543.92429 446.52933,597.098973 379.471608,635.771469 C312.413887,674.590453 228.079285,698.90725 163.071363,673.711532 C97.9170265,648.662302 51.9429555,574.100557 27.6381918,501.736112 C3.33342805,429.225182 0.697971745,359.058038 0.112314788,276.439523 C-0.619756407,193.674521 0.844385984,98.6046341 48.4290137,48.2131994 C96.0136414,-2.17823544 189.718754,-8.0377046 270.246586,7.78286214 C350.774418,23.7499156 376.54784,74.8527411 436.870506,123.046875 Z"></path>
                </svg>
            </div>
            <div class="hero-blobs__3">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 633 582">
                    <path class="blob-shape" d="M569.981008,10.7550543 C621.417854,38.2285083 636.37871,124.777006 632.389148,200.079893 C628.257103,275.525129 605.17464,339.582406 572.260758,399.369197 C539.204391,459.013638 496.316605,514.102896 435.618277,547.982078 C375.062433,581.861259 296.696047,594.388016 237.565046,567.199261 C178.434046,540.010505 138.395947,473.390938 91.0911462,404.493779 C43.7863458,335.738969 -10.9276402,264.706567 1.89595028,207.909116 C14.5770564,151.254014 94.9382234,108.691512 162.903253,84.2073977 C231.010767,59.5809338 286.864627,53.0328566 358.676734,33.9580233 C430.631325,14.8831899 518.544162,-16.7183997 569.981008,10.7550543 Z"></path>
                </svg>
            </div>
        </div>
    <nav>
        <div class="row">
                <svg xmlns="http://www.w3.org/2000/svg" width="260" height="33" viewBox="0 0 260 33"
                        class="logo-happytools">
                    <title id="logo-title">Happy Tools</title>
                    <g class="logo-wordmark" transform="translate(51.002538, 4.212849)">
                        <polygon points="12.437 9.303 5.237 9.303 5.237 .462 0 .462 0 23.554 5.237 23.554 5.237 14.383 12.437 14.383 12.437 23.554 17.674 23.554 17.674 .462 12.437 .462"/>
                        <path d="M28.0837848 14.9766683L30.7685316 6.49905854 33.4516329 14.9766683 28.0837848 14.9766683zM27.4296709.461985366L19.6395443 23.5537902 25.3677722 23.5537902 26.5130886 19.9249122 35.0231519 19.9249122 36.1684684 23.5537902 41.8958734 23.5537902 34.1065696.461985366 27.4296709.461985366zM52.535057 11.3482049L49.0982848 11.3482049 49.0982848 5.40981463 52.535057 5.40981463C54.1386646 5.40981463 55.3168924 6.69683902 55.3168924 8.37859512 55.3168924 10.0611805 54.1386646 11.3482049 52.535057 11.3482049M52.535057.4624L43.8612595.4624 43.8612595 23.5533756 49.0982848 23.5533756 49.0982848 16.2964488 52.535057 16.2964488C57.0513228 16.2964488 60.5539177 12.7662537 60.5539177 8.37859512 60.5539177 3.99176585 57.0513228.4624 52.535057.4624M71.8472152 11.3482049L68.410443 11.3482049 68.410443 5.40981463 71.8472152 5.40981463C73.4508228 5.40981463 74.6290506 6.69683902 74.6290506 8.37859512 74.6290506 10.0611805 73.4508228 11.3482049 71.8472152 11.3482049M71.8472152.4624L63.1734177.4624 63.1734177 23.5533756 68.410443 23.5533756 68.410443 16.2964488 71.8472152 16.2964488C76.363481 16.2964488 79.8660759 12.7662537 79.8660759 8.37859512 79.8660759 3.99176585 76.363481.4624 71.8472152.4624"/>
                        <polygon points="90.177 9.369 85.825 .462 79.868 .462 87.559 14.68 87.559 23.553 92.796 23.553 92.796 14.68 100.488 .462 94.531 .462"/>
                        <polygon points="107.036 5.542 112.928 5.542 112.928 23.554 118.164 23.554 118.164 5.542 124.056 5.542 124.056 .462 107.036 .462"/>
                        <path d="M135.97062 18.8691707C132.240114 18.8691707 129.294544 16.1317561 129.294544 12.0078049 129.294544 7.88385366 132.240114 5.14643902 135.97062 5.14643902 139.701949 5.14643902 142.647519 7.88385366 142.647519 12.0078049 142.647519 16.1317561 139.701949 18.8691707 135.97062 18.8691707M135.97062 1.95399252e-14C129.392456 1.95399252e-14 124.057519 5.21195122 124.057519 12.0078049 124.057519 18.8028293 129.392456 24.0156098 135.97062 24.0156098 142.549608 24.0156098 147.884544 18.8028293 147.884544 12.0078049 147.884544 5.21195122 142.549608 1.95399252e-14 135.97062 1.95399252e-14M161.763772 18.8691707C158.033266 18.8691707 155.087696 16.1317561 155.087696 12.0078049 155.087696 7.88385366 158.033266 5.14643902 161.763772 5.14643902 165.495101 5.14643902 168.440671 7.88385366 168.440671 12.0078049 168.440671 16.1317561 165.495101 18.8691707 161.763772 18.8691707M161.763772 1.95399252e-14C155.185608 1.95399252e-14 149.850671 5.21195122 149.850671 12.0078049 149.850671 18.8028293 155.185608 24.0156098 161.763772 24.0156098 168.342759 24.0156098 173.677696 18.8028293 173.677696 12.0078049 173.677696 5.21195122 168.342759 1.95399252e-14 161.763772 1.95399252e-14"/>
                        <polygon points="181.863 .462 176.626 .462 176.626 23.554 190.044 23.554 190.044 18.474 181.863 18.474"/>
                        <path d="M197.050051,6.89453659 C197.050051,5.97073171 197.868722,5.14643902 199.505241,5.14643902 C201.600051,5.14643902 202.679544,6.16892683 203.465304,7.81834146 L207.883658,5.21195122 C206.215051,1.81443902 203.269481,1.95399252e-14 199.505241,1.95399252e-14 C195.544354,1.95399252e-14 191.813848,2.57321951 191.813848,7.02639024 C191.813848,11.4472195 195.152709,13.0966341 198.555747,14.0527805 C201.992519,15.0097561 203.30157,15.5703415 203.30157,16.9892195 C203.30157,17.8798537 202.679544,18.8691707 200.193089,18.8691707 C197.607076,18.8691707 196.199291,17.5829756 195.381443,15.6698537 L190.864354,18.3085854 C192.141316,21.7060976 195.217709,24.0156098 200.028532,24.0156098 C205.003911,24.0156098 208.538595,21.3760488 208.538595,16.922878 C208.538595,12.0409756 204.644354,10.8202927 201.174671,9.76463415 C197.607076,8.67663415 197.050051,7.95019512 197.050051,6.89453659 Z"/>
                    </g>
                    <g class="logo-icon" transform="translate(0.455000, 0.247122)">
                        <path class="red" d="M-9.76996262e-14,17.4367211 C1.65382941,17.8235598 3.33067651,17.7115835 4.94329114,17.101463 L4.94329114,25.1897707 C4.94329114,26.575478 6.05734177,27.6991366 7.43221519,27.6991366 L20.6234369,27.6991366 L23.2606811,32.6814634 L26.2229747,32.6814634 L6.20297468,32.6814634 C2.79170886,32.6814634 1.82919783e-13,29.8685854 1.82919783e-13,26.4296098 L1.82919783e-13,17.4367211 L-9.76996262e-14,17.4367211 Z"/>
                        <path class="green" fill="#ABD8D4" d="M23.7354735,4.98216098 L7.43221519,4.98216098 C6.05734177,4.98216098 4.94329114,6.10581951 4.94329114,7.49152683 L4.94329114,17.101463 C3.33067651,17.7115835 1.65382941,17.8235598 -5.5067062e-14,17.4367211 L-5.04996888e-14,6.25185366 C-5.04996888e-14,2.81370732 2.79170886,-8.8817842e-15 6.20297468,-8.8817842e-15 L23.8416508,-8.8817842e-15 C23.3957774,1.52406008 23.3468797,3.20272652 23.7354735,4.98216098 L23.7354735,4.98216098 Z"/>
                        <path class="yellow" fill="#F7EF89" d="M20.6234369,27.6991366 L24.9929114,27.6991366 C26.3677848,27.6991366 27.4826582,26.575478 27.4826582,25.1897707 L27.4826582,4.98216098 L23.7354735,4.98216098 C23.3468797,3.20272652 23.3957774,1.52406008 23.8416508,2.06501483e-14 L32.4251266,2.06501483e-14 L32.4251266,26.4296098 C32.4251266,29.8685854 29.6342405,32.6814634 26.2229747,32.6814634 L23.2606811,32.6814634 C22.3867548,31.8237763 21.0043374,30.126914 20.6234369,27.6991366 L20.6234369,27.6991366 Z"/>
                    </g>
                </svg>
            <ul class="main-nav">
                <li><a href="#">Products</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Help</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </nav>
</header>

Answer 3

首先，更改您的html标记，将nav放在header中其他图像代码的前面。

然后给您的nav一点CSS，

nav {
   position: absolute;
   z-index: 100; // Give a higher value
}

如果您想要一个固定的顶部导航栏，总页面将在其下方滚动，则

nav {
   position: fixed;
   top: 0;
   z-index: 100; // Give a higher value
}

如何在另一个元素的顶部显示导航

3 个答案: