Question

我知道很多次问这个问题的版本。我知道因为我认为我在过去的4个小时内几乎每一个都读过它们。

我没有看到这方面的答案。

我遇到的问题是：我有一个模板，虽然非常实用，但允许对代码进行非常有限的控制。但是，我可以和CSS一起玩。现在，我需要在标题附近使用一些项目，就在页脚下方。

我有一个与我相对定位的工作包装器，并且绝对定位包含我需要在页脚下方的项目。

这非常适用于：

.referencepositionwrapper {
    position: relative;
}
.absolutepositioncontainer {
    position: absolute;
    bottom: -144px;
}

但仅当要降低的项目高度约为136像素时。

这就是问题。我需要移动到页脚下方的内容是动态的。有时它高136px，有时36px。有时它高300px。

目前，绝对定位项引用了包装器和容器的底部，因此当容器高度发生变化时，事情会变得很糟糕。

有没有办法使用包装器的底部和容器的顶部，这样两个元素之间或重叠之间没有大量的死区？

非常感谢，非常感谢任何帮助。

请求的上下文。

在我给出绝对类的例子中：

bottom:-144px;

在亲戚的底部和绝对的底部之间创建144px距离

当页脚高度只有136像素时，这是可以的。两个元素之间有一个合理的空间，大约8px。但是不同页面的高度绝对不同。

因此，当页脚包含更多数据时，足以使其达到300px的绝对高度，则会有156px的重叠。当数据较少时，说只有足够的数据才能达到36px的绝对值，就会有一个108px的“死空间”。

我想找到一种方法来定义相对的底部和绝对的顶部之间的距离，比如36px。

这样，无论绝对数据中有多少额外数据，相对和绝对数据之间只有36px。

感谢您的评论。希望这可以帮助。如果您需要任何其他信息，请与我们联系。

Answer 1

试试这个：

.referencepositionwrapper {
    position: relative;
}

.absolutepositioncontainer {
    position: absolute;
    top: 100%;
    margin-top: 36px; /* or your custom distance between the two */
}

相对定位容器中的绝对定位页脚

1 个答案: