如何创建一个看起来像漂浮在 div 上的表单？

Question

我是初学者。我正在尝试制作一个练习网页。我正在尝试将 PSD 设为 HTML。我不知道如何制作一个看起来像漂浮在 div 上的表单。表格的高度大于div.

的高度

这是一张图片：

我用红色标记了表格的区域，用浅绿色标记了 div 的区域。

我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous" />
    <title>Document</title>
</head>

<body>
    <div class="container-fluid py-5" style="background: #f7f7fd">
        <div class="container">
            <div class="row d-flex justify-content-between">
                <div class="col-md-5 py-5">
                    <h5>
                        Lorem, ipsum dolor sit amet consectetur adipisicing
                        elit. Similique qui unde inventore dignissimos quia
                        dolor in neque quasi incidunt mollitia laudantium
                        nisi eveniet doloribus aliquam, quod maxime voluptas
                        quos. Dolorum.
                    </h5>
                    <div class="d-flex mt-3">
                        <img class="img-fluid rounded-circle border border-light me-3"
                            src="./images/person/Dabananda_Mitra-removebg-preview.png" alt="Dabananda Mitra"
                            style="height: 50px; width: 50px" />
                        <div>
                            <h5 class="mb-0">Dabananda Mitra</h5>
                            <p class="mb-0">CEO & Founder</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="row">
                        <form class="d-flex justify-content-center py-5" style="background: #007bff">
                            <div class="col-11">
                                <h4 class="text-light mb-3">
                                    Free consaltation
                                </h4>
                                <input type="text" class="form-control mb-3" id="Name" placeholder="Name:"
                                    style="border-radius: 0%" />
                                <input type="email" class="form-control mb-3" id="Email" placeholder="Email:"
                                    style="border-radius: 0%" />
                                <select class="form-select form-select mb-3" aria-label=".form-select example"
                                    style="border-radius: 0%">
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                                <textarea class="form-control mb-3" placeholder="Message:" rows="4"
                                    style="border-radius: 0%"></textarea>
                                <button type="submit" style="
                                            background: #08237e;
                                            width: 15rem;
                                            height: 2.5rem;
                                            color: white;
                                            border: transparent;
                                        ">
                                    SEND REQUEST
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
        crossorigin="anonymous"></script>
</body>

</html>

如何制作这种类型的表格？

Answer 1

尝试以下 css。你是这个意思吗？您可能希望向容器中添加一个 class，这样您就只能 select 这个 div.

    <style>
      .container-fluid {
        position:relative;
      }
      
      .container:before, .container:after {
        position:absolute;
        content:"";
        background-color: white;
        height:80px;
        width:100%;
        z-index: 1;        
      }

      .container:before {
        top:0;
        left:0;
      }

      .container:after {
        bottom:0;
        left:0;
        
      }

      form {
        z-index:2;
      }
    </style>

如何创建一个看起来像漂浮在 div 上的表单？

How do I create a form that looks like it's floating on a div?

html

javascript

twitter-bootstrap

bootstrap-5