如何在不影响其他项目位置的情况下在弹性列中添加元素？

Question

我不想添加像 this 这样的 p。我可以添加它，但是当我使用 margin-top 放下它时，它会像 this 一样影响上面的元素。我不知道如何解决这个问题。谢谢。

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;
            }
        }
    }
}

如何在不影响其他项目位置的情况下在弹性列中添加元素？

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

html

css

frontend

sass

web