css - parent 是绝对位置， child 是相对的， parent 应该有他们的高度

Question

我有一个 div #budget-search-thirds，它是绝对位置，但它的子元素不是。这个父 div 不应该承担它的 child 的高度吗？

#budget-search-thirds {
  background: red;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px 0;
}
.container, .super-container {
  display: block;
  margin: 0 auto;
  position: relative;
  max-width: 1120px;
  clear: both;
  overflow: hidden;
}
.wrapper {
  display: block;
  padding: 0 10px;
  width: auto;
}
.row-block {
  margin: 0;
  position: relative;
  float: left;
  display: block;
  width: 100%;
  clear: both;
  background: #fff;
}

<div class="row-block finance parallax__group">
    <div class="parallax__layer--back parallax__layer"></div>
    <div class="wrapper">
      <div class="container">
        <div class="parallax__layer--base parallax__layer" id="budget-search-thirds">
          <div class="sixcol"></div>
          <div class="sixcol last" style="
    display: block;
">
            <h2><span class="preHeading">Used Car</span>Finance Specialists</h2>
            <p class="right">We have relationships with high street lenders and specialist motoring finance houses too, that is why <strong>we have helped hundreds of customers</strong> secure the <strong>best finance deal</strong> for their budget.</p>
            <div class="fin-slider">
              <div id="finance-budget-range-min" class="clear-fix">
                <div class="row">
                  <div class="budget-slider">
                    <div class="form-group">
                      <label for="amount-budget-range-min">Monthly Budget:</label>
                      <input type="text" id="amount-budget-range-min">
                    </div>
                    <div class="slider-group">
                      <div id="slider-range-min" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 20%;"></div><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 20%;"></span></div>
                    </div>
                  </div>
                  <div class="search-btn">
                    <a id="button-budget-range-min" class="button" href="/search_page.php?budget=200" title="budget search">Search</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

position: absolute;的定义是元素相对于其第一个定位的(非静态)祖先元素定位。

当前 #budget-search-thirds相对于 <div class="container"> 定位.自 #budget-search-thirds top、right、bottom 和 left 属性设置为 0，相对于 <div class="container"> , 因此高度由 <div class="container"> 决定而不是它的 child 。