Question

我有一个div #budget-search-thirds这是绝对的位置，但是它的孩子不是。难道这个父母不应该接受它的孩子的高度吗？

#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">而不是其子项确定。

父母是绝对的职位，孩子是亲戚，父母应该有自己的身高

1 个答案: