Question

我正在尝试使用位置技术将具有预约形式的div叠加在具有背景颜色的div上。当我向div添加填充有背景颜色时，<select>受div填充的影响。

我的代码是：

http://codepen.io/thehung1724/full/bptxj/

HTML

<div id="reservation">
  <div class="container">                               
    <form action="#" class="reservation-section">
      <div class="reservation-form">
        <div class="row">
          <div class="col-md-2">
            <div class="form-group">
              <label for="room">Type of room:</label>
              <select class="form-control" name="room" id="room">
                <option disabled="disabled" selected="selected">Select a type of room</option>
                <option value="Single">Single room</option>
                <option value="Double">Double room</option>
                <option value="Deluxe">Deluxe room</option>
              </select>
            </div>  <!-- end form-group -->
          </div>

          <div class="col-md-2">
            <div class="form-group">
              <label for="checkin">Check-in date:</label>
              <i class="fa fa-calendar infield"></i>
              <input class="form-control" type="text" id="checkin" name="checkin" placeholder="DD/MM/YYYY">
            </div>  <!-- end form-group -->
          </div>

          <div class="col-md-2">
            <div class="form-group">
              <label for="checkout">Check-in date:</label>
              <i class="fa fa-calendar infield"></i>
              <input class="form-control" type="text" id="checkout" name="checkout" placeholder="DD/MM/YYYY">
            </div>  <!-- end form-group -->
          </div>

          <div class="col-md-1">
            <div class="form-group">
              <label for="room">Adults:</label>
              <select class="form-control" name="room" id="room">
                <option value="one">1</option>
                <option value="two">2</option>
                <option value="three">3</option>
              </select>
            </div>  <!-- end form-group -->
          </div>

          <div class="col-md-1">
            <div class="form-group">
              <label for="room">Children:</label>
              <select class="form-control" name="room" id="room">
                <option value="one">1</option>
                <option value="two">2</option>
                <option value="three">3</option>
              </select>
            </div>  <!-- end form-group -->
          </div>
        </div>
      </div>    <!-- end reservation-form -->
    </form> <!-- end reservation-section -->
  </div>    <!-- end container -->
</div>  <!-- end reservation -->

<div id="room">
  Simple test goes here
</div>  <!-- end room -->

CSS（少）

body{
  margin-top: 150px;
}

/* 5. RESERVATION */
#reservation{
  z-index: 1;
  position: absolute;
}

.reservation-section{
    background-color: #fff;
    border: 2px solid rgba(0, 0, 0, 0.1);
    position: relative;
    margin-bottom: 40px;
    margin-top: -50px;

    .form-group{
        margin-top: 15px;
        width: 100%;

        .form-control{
            color: #373535;
            border: 1px solid #d6d4d4;
            width: 100%;
            border-radius: 3px;
            padding: 8px;
        }

        label{
            display: inline-block;
            margin-bottom: 10px;
        }
    }
}

/* 6. RESERVATION */
#room{
  padding-top: 90px;
  background-color: #ebebeb;
}

Answer 1

不确定您要设计的是什么，但您的选择元素具有相同的ID（#room）和具有背景颜色的div，因此css

#room{
  padding-top: 90px;
  background-color: #ebebeb;
}

也适用于他们。不管怎样，你不应该在同一页面上有相同的ID

在带有背景颜色的div上覆盖带有表单的div时选择填充问题

1 个答案: