jquery - Css强制按钮位于绝对div的底部

Question

我想知道是否有任何方法可以强制在没有设置绝对位置 div 之后的 div 是高度留在底部并且不会成为绝对 div？

这是代码:

    .wrap {
      position: relative;
    }
    .ab {
      position: absolute;
    }

<div class="wrap">
  <div class="ab row">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
</div>
<div class="row">
  <button>push me</button>
</div>

Answer 1

我创建这个是为了查找元素是否是绝对位置:

//check if prev element child has position absolute like your OP
var pos = $(".row").prev().children(".ab").css("position");

if (pos == "absolute") {
  //take the height of the element
  var height = $(".row").prev().children(".ab row").css("height");
  //change element that contains button top position
  $(".row").css({
    "position": "relative",
    "top": height
  });
}

.wrap {
  position: relative;
}
.ab {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="ab row">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
</div>
<div class="row">
  <button>push me</button>
</div>

我还创建了一些更通用的东西来匹配任何可能具有绝对位置的元素:

$(".row").prev().find("*").each(function() {
  if ($(this).css("position") == "absolute") {
    var height = $(this).css("height");
    $(".row button").css({
      "position": "relative",
      "top": height
    });
  }
});

.wrap {
  position: relative;
}
.ab {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="ab row">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
</div>
<div class="row">
  <button>push me</button>
</div>