位置绝对元素消失

Question

我正在重新创建一个练习网站，需要一些帮助。我要在页面上设置3个元素。标头是父级，而.hero-blobs是子级。

当我将.hero-blobs设置为绝对位置时，元素将从页面中消失。

header {
  height: 100%;
  width: 100%;
  position: relative;
}

.hero-blobs {
  position: absolute;
  height: 100%;
}

.hero-blobs__1 {
  top: -11rem;
  right: -4rem;
}

.hero-blobs__2 {
  top: 11rem;
  right: 4rem;
}

.hero-blobs__3 {
}

.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>
</header>