DONT ADD ANYTHING HERE!

1
2
3
4
5

Notes

div position top right bottom left
1 absolute 0 — — 0
2 absolute 0 0 — —
3 absolute — — 0 0
4 absolute — 0 0 —
5 absolute — 35% 30% —

Code

HTML

<div class="outer-container">
    <div class="inner-container">
        <div id="div-one" class="absolute">1</div>
        <div id="div-two" class="absolute">2</div>
        <div id="div-three" class="absolute">3</div>
        <div id="div-four" class="absolute">4</div>
        <div id="div-five" class="absolute">5</div>
    </div>
</div>

CSS

.absolute {
    position: absolute;
}

div.outer-container {
    display: flex;
}

div.inner-container {
    border: 2px solid orange;
    position: relative;
    height: 20vh;
    width: 50%;
    margin: auto;
}

#div-one,
#div-two,
#div-three,
#div-four,
#div-five {
    width: 8vw;
    height: 8vh;
    margin: 0;
    text-align: center;
}

#div-one {
    background: red;
    top: 0;
    left: 0;
}

#div-two {
    background: lime;
    top: 0;
    right: 0;
}

#div-three {
    background: blue;
    color: white;
    bottom: 0;
    left: 0;
}

#div-four {
    background: cyan;
    bottom: 0;
    right: 0;
}

#div-five {
    background: purple;
    color: white;
    bottom: 30%;
    right: 35%;
}

References