Make icons visible regardless of absolute positioning

Question

I am new to HTML and CSS. I want the black and blue shape to be able to stay inside of the red shape as it is now and the icons to be visible over the red shape.

#leftnav {
background-color: #fc638f;
width: 6rem;
height: 35rem;
border-radius: 25px;
text-align: center;
margin-top: 1.5rem;
margin-left: 1.5rem;
position: relative;
}

#container2 {
    position: absolute;
}

.iconsclass {
    margin: 25px;
}

#container {
    width: 150px;
    height: 150px;
    position: relative;
    margin-left: 1rem;
}

#buttonsoverlay {
    background-color: red;
    height: 70px;
    width: 5rem;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    margin-top: 1.86rem;
    position: absolute;
}

#alloverlays {
    padding-top: 5.1rem;
}

#topbuttonsoverlay {
    background-color: blue;
    height: 2rem;
    width: 2rem;
    margin-left: 3.16rem;
    --mask: radial-gradient(30px at 0 0,#0000 98%,#000);
    -webkit-mask: var(--mask);
    mask: var(--mask);

}

#bottombuttonsoverlay {
    background-color: black;
    height: 2rem;
    width: 2rem;
    margin-top: 4.1rem;
    margin-left: 3.16rem;
        --mask: radial-gradient(30px at 0 100%,#0000 98%,#000);
        -webkit-mask: var(--mask);
                mask: var(--mask);
}

<main>
        <div id="leftnav">

            <div id="icons">
                <div id="container2">
                    <img class="iconsclass" src="/images/apple.png" alt="" style="width: 40px;">
                    <img class="iconsclass" id="firstbtn" src="/images/home.png" alt="" style="width: 40px;;">
                    <img class="iconsclass" id="secondbtn" src="/images/play.png" alt="" style="width: 40px;">
                    <img class="iconsclass" id="thirdbtn" src="/images/play2.png" alt="" style="width: 40px;">
                    <img class="iconsclass" id="forthbtn" src="/images/send1.png" alt="" style="width: 40px;">
                </div>
            </div>

            <div id="alloverlays">
                <div id="container">
                    <div id="buttonsoverlay"></div>
                    <div id="topbuttonsoverlay"></div>
                    <div id="bottombuttonsoverlay"></div>
                </div>
            </div>
        </div>
    </main>

Result

The problem is that the icons are not visible because the red shape is on top of it. How can I move the icons above the red shape while keeping everything as it is?

I am a bit ashamed to show the CSS because I don't think it's done properly but it does what I want besides the visibility of the icons. The solution could be simple but I thought so much about it I can't think anymore.

Thank you!