如何在不影響其他項目的 position 的情況下在彈性列中添加元素？

Question

我不想添加這樣的p 。 我可以添加它，但是當我使用 margin-top 放下它時，它會像這樣影響上面的元素。 我不知道如何解決這個問題。 謝謝你。

HTML。

<main>
        <section class="home">
            <div class="presentation">
                <p class="hello">HELLO THERE</p>
                <p>I'm Lautaro Rojas</p>
                <p>Web developer</p>
                <p class="scroll">SCROLL DOWN</p>
            </div>
            <div class="presentation-buttons">
                <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[class="hello"] {
                font-size: 30px;
                color: $PINK;
            }

            p[class="scroll"] {
                margin-top:180px;
                font-size: 10px;
            }
        }
    }
}

Answer 1

position: absolute; 是你的朋友...

<main>
        <section class="home">
            <div class="presentation">
                <p class="hello">HELLO THERE</p>
                <p>I'm Lautaro Rojas</p>
                <p>Web developer</p>
                <p class="scroll">SCROLL DOWN</p>
            </div>
            <div class="presentation-buttons">
                <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[class="hello"] {
                font-size: 30px;
                color: $PINK;
            }

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