How to make an element that is using absolute positioning stay in the same spot when the browser is resized

Question

I have a few elements that are positioned on the page using absolute positioning, but when I resize the browser they disappear off the screen. How do I solve this problem? One of my current issues is that I have created a colorful circle on the bottom right corner of the viewport using clip path, but when I resize it, it disappears. I have attached my html and css code to show what I am currently trying that doesn't work.

html:

<section class="section" id="section--about">
    <div class="color--overlay--4"></div>
    <div class="about__content">
        <h1>Journalist student</h1>
        <div class="icon__container">
            <svg class="media__icon slide--down">
              <use xlink:href="./img/sprite.svg#icon-map-pin"></use>
            </svg>
            <h2 class="move--in" id="location">Arizona State University</h2>
          </div>
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores 
            officia corrupti atque beatae! Alias neque harum quo error optio nesciunt! 
            Odit nostrum nemo amet delectus mollitia, laborum molestias cupiditate architecto.
            Possimus explicabo, sit cum maxime similique quam asperiores quis tempore facere 
            iusto accusamus, corporis ipsum mollitia magni aut vitae, blanditiis tempora 
            porro aliquid! Id sequi non nemo quasi fugit amet? Possimus explicabo, sit cum maxime similique quam asperiores quis tempore facere 
            iusto accusamus, corporis ipsum mollitia magni aut vitae, blanditiis tempora 
            porro aliquid! Id sequi non nemo quasi fugit amet? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores 
            officia corrupti atque beatae!
        </p>
    </div>
    <img src="./img/woman.jpg" alt="Danielle image" id="owner--image">
</section>

css:

  /* about section */
.color--overlay--4 {
    background-color: var(--color-primary);
    height: 100%;
    width: 100%;
    clip-path: circle(200px at 1325px 550px);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

#section--about {
    display: flex;
    justify-content: center;
    position: relative;

}

#section--about p {
    width: 50rem;
    font-size: 1.5rem;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.8;
}


.media__icon {
    width: 4rem;
    height: 4rem;
    fill: var(--color-primary-dark);
    transition: all 1.5s;
}

#location {
    font-size: 2.7rem;
    font-weight: 400;
    color: var(--font-black);
    font-family: "Quicksand", sans-serif;
    transition: all 1.5s;  
}

.icon__container {
    display: flex;
    align-items: center;
    margin: 3rem 0;
}

.about__content {
    margin-right: 5rem;
    z-index: 1;
    position: relative;
}

#owner--image {
    height: 50rem; 
    width: auto;
    margin-left: 5rem;
}