How can I add an element in a flex column without affecting other item's position?-CodePudding

I wan't to add a p like this. I can add it, but when I use margin-top to put it down, it affects the elements above like this. I don't know how to solve this. Thank you.

HTML.

<main>
        <section >
            <div >
                <p >HELLO THERE</p>
                <p>I'm Lautaro Rojas</p>
                <p>Web developer</p>
                <p >SCROLL DOWN</p>
            </div>
            <div >
                <button>LATEST PROJECTS</button>
                <button>MORE ABOUT ME</button>
            </div>
        </section>
    </main>

CSS:

main {
    width: 100%;
    height: 100%;

    .home {
        width: 100%;
        height: 100%;
        background-image: url("../img/bg.jpg");
        background-size: cover;
        display: flex;
        align-items: center;

        .presentation {
            width: 70%;
            height: 100%;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
            gap: 5px;

            p {
                width: 50%;
                margin: 0;
                text-align: left;
                color: $WHITE;
                font-family: Merriweather-Regular;
                font-size: 70px;
                letter-spacing: 2px;
            }

            p[] {
                font-size: 30px;
                color: $PINK;
            }

            p[] {
                margin-top:180px;
                font-size: 10px;
            }
        }
    }
}

CodePudding user response：

position: absolute; is your friend...

<main>
        <section >
            <div >
                <p >HELLO THERE</p>
                <p>I'm Lautaro Rojas</p>
                <p>Web developer</p>
                <p >SCROLL DOWN</p>
            </div>
            <div >
                <button>LATEST PROJECTS</button>
                <button>MORE ABOUT ME</button>
            </div>
        </section>
    </main>

main {
    width: 100%;
    height: 100%;

    .home {
        width: 100%;
        height: 100%;
        background-image: url("../img/bg.jpg");
        background-size: cover;
        display: flex;
        align-items: center;

        .presentation {
            width: 70%;
            height: 100%;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
            gap: 5px;
            position: relative;
            p {
                width: 50%;
                margin: 0;
                text-align: left;
                color: $WHITE;
                font-family: Merriweather-Regular;
                font-size: 70px;
                letter-spacing: 2px;
            }

            p[] {
                font-size: 30px;
                color: $PINK;
            }

            p[] {
                margin-top:180px;
                font-size: 10px;
                position: absolute;
            }
        }
    }
}