Question

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

这是代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

试试看你正在期待什么

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


.row {
    position: absolute;
    bottom:0;
}

Answer 2

我创建它以查找元素是否为绝对位置：

＆＃13;

//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
  });
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: