如何在弹性列中添加一个元素，而不会影响其他项目的位置？

Question

我不会添加p喜欢 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

位置：绝对;是您的朋友...

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