2

我在使用此页面时遇到了一些困难。它几乎可以正常工作。

红色框应位于窗口的中心 (h&v)。作品。

黄色框应贴在窗口底部。作品。

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

有谁知道我怎么能做到这一点？

谢谢。

4

5 回答 5

2

将此添加到 CSS 中#wrapper：

height: 100%;
position: relative;

之所以可行，是因为您的绝对定位元素是相对于视口定位的，因为没有任何其他包含块。通过添加position: relative到#wrapper（或body就此而言），您可以确保包含块成为整个正文内容。

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

于 2009-08-17T23:06:17.213 回答
1 
#footer{z-index: 1000;}
#logo{z-index: 1001;}
于 2009-08-17T22:42:04.953 回答
0

z-index 是您所需要的。虽然 1000 有点过分

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

会成功的

于 2009-08-17T22:48:05.833 回答
0

记住，在不指定的情况下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>

否则，正如另一个答案所暗示的那样，为 the 指定一个#logo比为 the更大的数字#footer将导致#logo更高。

当视口窗口 < 400px 时强制滚动条，

#wrapper {
min-width: 400px;
min-height: 400px;
overflow: scroll; /* or overflow: auto */
}
于 2009-08-17T23:01:52.870 回答
0

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

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

在两者之间夹入一个相对大小的元素（例如height: 100%）会将黄色 div 推到屏幕底部，但正确垂直对齐可能会很棘手。

于 2009-08-17T23:08:25.120 回答