css - 如何在调整视口(viewport)大小时使用媒体查询在轮播下方制作表单

Question

There is a bootstrap carousal(full-width) on my page and the carousal have registration form an i want to bring the form below the carousel on resizing the screen,I am using media queries but my form is coming above the text of my page below is my screenshot and code can anyone help to sort the problem

    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('images/corousal1.jpg');"></div>
            <div class="carousel-caption">
                <h3><strong>Healing People,</strong>Changing lives<br/>
                    Personalized Treatments that are safe,
                    Sure and Scientific
                </h3>
            </div>
        </div>
           <div class="multi-form">
              <form id="msform">
       <fieldset>
                <input type="button" name="next" class="next action-button btn-btn-primary" value="Book An Appointment">
                <button type="button" class="next action-button btn-btn-primary" style="background-color:#3B5998 !important;"><i class="fa fa-facebook" aria-hidden="true"></i> Connect With Facebook</button>
            </fieldset>
       </form>
        </div>

media queries

@media (max-width:786px) {
   .multi-form {
    margin-top: 400px;
    height: 100%;
    z-index: 1000;
    display: block;
}
}

full page screenshot Responsive page screenshot

Answer 1

您是否尝试过使用绝对 位置？你可以用 % 中的绝对位置和值设计 div。

例如:

 .multi-form {
    position:absolute;
    top:20%;  
    right:0%;
    left:0%;
    bottom:0%;
  }

这适用于所有分辨率。

编辑:

绝对定位意味着元素完全脱离页面布局的正常流程。就页面上的其余元素而言，绝对定位元素根本不存在。然后单独绘制元素本身，有点像在其他所有元素的“顶部”，位于您使用左、右、上和下属性指定的位置。

您肯定想看看这个 positioning article来自 A List Apart。

最后请尝试让my corousel absolute 定位，my form relative 定位。这样您的组件就可以按照您的期望在所有分辨率下工作。