重叠绝对定位的内容 [英] Overlapping absolutely positioned content

问题描述

在此页面上，我遇到了一些麻烦。它几乎可以正常工作。

I am having a bit of difficulties with this page. It's ALMOST working correctly.

红色框应位于窗口的中心（h& v）。

The red box should be centered (h&v) on the window. WORKS.

黄色框应粘贴在窗口底部。

The yellow box should be affixed to the bottom of the window. WORKS.

。当窗口小于400像素时，应显示高滚动条，并且黄色框应出现在滚动区域的底部。基本上，我永远不希望黄色框显示在红色框上方，反之亦然。

When the window is less then 400 pixels high scroll bars should appear and the yellow box should appear at the bottom of the scroll area. Basically I never want the yellow box to appear over the red box, or vice-versa. DOESN'T WORK

有人知道我能做到这一点吗？

Anyone know how I can achieve this?

谢谢。

Thanks.

推荐答案

将其添加到CSS中，用于 #wrapper ：

Add this to the CSS for #wrapper:

height: 100%;
position: relative;

之所以起作用，是因为由于缺少，您绝对定位的元素相对于视口已定位任何其他包含区块。通过在 #wrapper （或 body 中添加 position：relative c>）），请确保将包含块改为整个内容。

The reason this works is because your absolutely positioned elements are positioned relative to the viewport due to the absence of any other containing block. By adding position: relative to the #wrapper (or the body for that matter) you make sure that the containing block becomes the entire body content instead.

高度：100％来确保包含的块至少能够到达视口的底部即可。

The height: 100% is then only needed to ensure that the containing block does at least reach the bottom of the viewport.

这篇关于重叠绝对定位的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！