html - 具有位置的元素上的垂直空间：绝对

Question

如何仅使用 css 使具有动态高度position:absolute的元素占据垂直空间？我可以使用容器和显示器有什么技巧吗？

Answer 1

不幸的是，根据定义，使用绝对定位意味着您的元素不再占用空间。所以不，只有通过 css 没有办法做到这一点。

您当然可以使用 jQuery（或纯 javascript）来完成此操作。我的做法是space在每个垂直元素旁边都有一个元素。将空间元素和绝对定位的垂直元素都包含在相对定位的 div 中。在页面加载时，更改空间元素的高度以匹配垂直元素的高度。

Answer 2

position: absolute意味着它们不占用流量中的空间。但是，您不必使用边距进行动画处理，您可以使用float让元素占据任何空间，并制作每个元素 position:relative。

div.animate-me {
   width: 300px;
   margin: 20px;
   float: left;
   left: -1000px; // Make them start offscreen
   position: relative;
   border: 1px solid red;
   visibility: hidden
}​

$('div').css().animate({
    left: 0
});

示例 http://jsfiddle.net/qxzzX/1/

Answer 3

这并不适用于所有情况，但是：如果position: absolute元素具有固定的纵横比（例如，使用 响应调整大小的图像或视频height: auto），您可以利用该padding-bottom技巧为间隔元素提供相同的纵横比，以便它与absolute元素一起调整大小：

.spacer {
  height: 0;
  padding-bottom: 125%; /* for a 1.25 height/width ratio */
}

您可以阅读链接，但这有效，因为padding-bottom百分比被解释为元素宽度的百分比。

然后由您的特定布局来定位垫片，使其精确地覆盖或覆盖position: absolute元素，并占用您的absolute元素本来应该拥有的空间absolute。