Css anmacja dwa koła nachodzące się

Cześć, chciałbym by dwa kółka poruszały się na tej samej wysokości od lewa do prawej z odbiciem i by przecinały się co jakiś czas. Całość chcę by była w jakimś

Relatywnie.
Gdy ustawiam postion:fixed wszystko działa ale jest w jednym miejscu, gdy znowu dam relative to jedno kółko jest pod drugim a nie na tej samej płaszczyźnie X.</p>

Html:

<div class="animationContainer1">
    ppp
    <p class="box1" />
    <p class="box2" />
</div>

CSS

.box1 {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: blue;
    border-radius: 50%;
    animation-name: myanimation1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
    animation-direction: alternate;
    z-index: 11;
    pointer-events: none;
    overflow: hidden;
}

.box2 {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: blue;
    border-radius: 50%;
    animation-name: myanimation2;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
    animation-direction: alternate-reverse;
    z-index: 12;
    pointer-events: none;
    overflow: hidden;
}

@keyframes myanimation1 {
    0% {
        background-color: blue;
        left: 0px;
        /*top: 300px;*/
    }

    100% {
        background-color: red;
        left: 100%;
        /*top: 300px;*/
    }
}

@keyframes myanimation2 {
    0% {
        background-color: red;
        left: 100%;
        /*top: 300px;*/
    }

    100% {
        background-color: blue;
        left: 0px;
        /*top: 300px;*/
    }
}

.animationContainer1 {
    width: 100%;
    height: 300px;
    position: relative;
    background-color: purple;
    pointer-events: none;
    overflow: hidden;
}

próbowałem coś z:
pointer-events: none;
overflow: hidden;
z-index: 12;
ale nic z tego. Gdy daje position fixed fajnie się nachodzą, natomiast przy relative już nie. Jak to naprawić :( ?

Pozdrawiam
wonman

Ale wiesz, że oprócz position: fixed oraz position: relative jest jeszcze parę innych? ;-)

Kontenerowi, w którym znajdują się koła, ustaw position: relative, a samym kołom daj position: absolute (absolute daje możliwość dowolnej zmiany w odniesieniu do najbliższego rodzica z relative).