绝对定位元素的垂直间距问题

Question

如何仅使用CSS让具有position:absolute和动态高度的元素占据垂直空间？ 是否可以使用容器和显示的技巧来实现？

- Yisela

---

position: absolute 表示它们不在流中占用空间。请提供您尝试做的示例。 - Ruan Mendes

我正在使用位置在js中从右到左动画化一系列div，但结构可以是任何东西。我想知道是否有一个不太合法的技巧使其使用垂直空间（也许不行）。 - Yisela

Answer 1

很遗憾，使用绝对定位意味着您的元素不再占用空间。因此，仅通过 CSS 是无法做到这一点的。

当然，您可以使用 jQuery（或纯 JavaScript）来实现此目的。我会在每个垂直元素旁边放一个“空间”元素。将空间元素和绝对定位的垂直元素都包含在相对定位的 div 中。在页面加载时，将空间元素的 height 更改为与垂直元素的高度相匹配。

- Jeff Gortmaker

Answer 2

position: absolute表示元素不占用流中的空间。但是，您不必使用margin进行动画，可以使用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/

- Ruan Mendes

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 元素本来将占用的空间。

- user1454265

---

哇，这个打击技巧很棒。但我想知道是否有一种方法可以使用父元素高度的100％而不是宽度。 - Radon8472