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

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