div的绝对定位，不与上面的div重叠

Question

我有一个 div，我希望将其放置在网页底部。我可以使用

position:absolute

来实现这一点。但是，当窗口变小时，我不希望它与上面的 div 重叠。这是通过将其更改为

position:relative

来实现的，但正如预期的那样，它不会停留在较大屏幕上的页面底部。

有没有办法可以做到这一点？

当前CSS

position:relative; 
bottom:0; 
background-image:url('.......'); 
background-repeat:repeat-x; 
background-position:bottom;
width:100%;

我正在解释的一个例子。

Answer 1

对我来说，最好的想法是为所有页面内容创建一个容器 DIV（使用流行的做法将其拉伸以适合所有屏幕）。然后，您可以通过设置 position:absolute 和 bottom: 0 将页脚放置到该容器的底部，并且不要忘记将 padding-bottom: footer 的高度 设置为容器。这将防止页脚与页面内容重叠。

Answer 2

尝试将

min-height

赋予页脚上方的

DIV

DIV

。

Answer 3

当窗口变小时，使用

media queries

表示该特定分辨率或小于该分辨率的分辨率，如果您不希望它显示，则对具有绝对位置的类的该 div 应用

display:none;

或

z-index:0; 

或

z-index:-1;

如果您想将其显示在内容 div 下方。

希望这有帮助。

Answer 4

您可以在上部

margin-bottom

上设置绝对元素高度的

div

。这样，您的绝对定位元素将溢出边距而不是元素本身。

Answer 5

我认为，您应该恢复到 position:absolute，然后尝试给它一个较低的 z-index 值，例如 z-index: -1

Answer 6

我有类似的问题，希望所有的 div 子级都坐在父级的底部。

我给每个 div 一个类名（服务），然后...

.service{
Display: flex;
Flex-direction: column;
Justify-content: flex-end;
}