网格中的元素位置

Question

我有一个三列网格。

在我的中心栏中，我有多个表单卡片，我想要一个“下一步”按钮，以显示下一个卡片输入。

但我不知道为什么，“下一步”按钮从我的卡中穿过。我需要放一个position: absolute，但是我不喜欢。

如何让“下一步按钮”从卡片中获取相对位置？

谢谢

这是代码笔 link : https://codepen.io/Beko6740/pen/xxqJVyg

<div class="wrapper">
<div class="form_level">The form level</div>

<div class="form">
    <form action="#" method="post">
        <div class="card" pannel="general">
            <p class="input_label">Firstname</p>
            <input type="text" name="firstname" required>

            <p class="input_label">Lastname</p>
            <input type="text" name="lastname" required>

            <p class="input_label">Predecessor</p>
            <input type="text" name="predecessor">
        </div>
    </form>

    <button class="card_next">Next</button>
</div>

<div class="form_summary">The summary of the form</div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
}

form {
    position: relative;
    padding: 15px;
    top: 50%;
    transform: translateY(-50%);
}

input:focus-visible {
    outline: none;
}

input {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid grey;
}

.input_label {
    margin-top: 15px;
    font-weight: 300;
}

.input_label:first-of-type {
    margin-top: 0px;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100vh, auto);
    grid-column-gap: 10px;
}

.card {
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.card_next{
    margin: 10px auto;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    background-color: white;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

红色：我的网格

绿色: 我想要按钮的地方。

Answer 1

我已经在表单中添加了按钮，display:flex; 到按钮...这是代码..

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
    }
    
    body {
        width: 100%;
        height: 100vh;
        background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
    }
    
    form {
        position: relative;
        padding: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    input:focus-visible {
        outline: none;
    }
    
    input {
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid grey;
    }
    
    .input_label {
        margin-top: 15px;
        font-weight: 300;
    }
    
    .input_label:first-of-type {
        margin-top: 0px;
    }
    
    .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100vh, auto);
        grid-column-gap: 10px;
    }
    
    .card {
        width: 400px;
        margin: 0 auto;
        padding: 20px;
        background: #fff;
        border-radius: 15px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    }
    
    .card_next {
        margin: 10px auto;
        width: 100px;
        height: 100px;
        border-radius: 100px;
        border: none;
        cursor: pointer;
        background-color: white;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    }
    
    .btn {
        display: flex;
        justify-content: center;
    }

<body>
    <div class="wrapper">
        <div class="form_level">The form level</div>

        <div class="form">
            <form action="#" method="post">
                <div class="card" pannel="general">
                    <p class="input_label">Firstname</p>
                    <input type="text" name="firstname" required>

                    <p class="input_label">Lastname</p>
                    <input type="text" name="lastname" required>

                    <p class="input_label">Predecessor</p>
                    <input type="text" name="predecessor">
                </div>

                <div class="btn">
                    <button class="card_next">Next</button>
                </div>

            </form>

        </div>

        <div class="form_summary">The summary of the form</div>
    </div>

</body>

网格中的元素位置

Element position in grid

grid

position