Question

this page我遇到了一些困难。它几乎正常工作。

红色框应该在窗口上居中（h＆amp; v）。 WORKS。

黄色方框应贴在窗户底部。 WORKS。

当窗口小于400像素时，应出现滚动条，黄色框应显示在滚动区域的底部。基本上我从不希望黄色框出现在红色框上方，或相反亦然。不工作

任何人都知道如何实现这一目标？

感谢。

Answer 1

将其添加到#wrapper的CSS：

height: 100%;
position: relative;

这样做的原因是因为没有任何其他containing block，您的绝对定位元素相对于视口定位。通过将position: relative添加到#wrapper（或body），您可以确保包含的块成为整个正文内容。

然后只需要height: 100%来确保包含块至少到达视口的底部。

Answer 2

#footer{z-index: 1000;}
#logo{z-index: 1001;}

Answer 3

z-index是你需要的。虽然1000有点过分简单

#footer{ z-index:2; }
#logo{ z-index:3; }

会做的伎俩

Answer 4

记住，在没有指定z-index的情况下，元素与z顺序中的最新元素“最高”叠加是有用的。因此，如果您想避免指定z-index，请反转html：

<body>


    <div id="wrapper">

        <div id="footer">

            This is the footer. It should always appear at the bottom of the page, but not over the red box.            

        </div>

        <div id="logo">
            <h1>Logo</h1>
        </div>

    </div>

</body>

否则，正如其他答案所示，为#logo指定的数字大于#footer的数字会导致#logo更高。

当视口端口窗口为＆lt;时，强制执行滚动条。 400像素，

#wrapper {
min-width: 400px;
min-height: 400px;
overflow: scroll; /* or overflow: auto */
}

Answer 5

Z-Index不是这里的一个因素。 Z-Index仍然允许元素重叠 - 它只会决定哪个元素在顶部。

在文档流程中的红色div之后使用 float ing元素，然后在黄色上使用 clear 来创建元素之间的关系（即黄色div将清除红色并且不会重叠。）

在两者之间夹入相对大小的元素（例如高度：100％）会将黄色div推到屏幕底部，但垂直对齐可能会很棘手。

重叠绝对定位的内容

5 个答案: