当前位置：文江博客话题详情

CSS css-position

重叠绝对定位的内容

发布于 2024-08-01 22:58:56 字数 323 浏览 3 评论 0 原文

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

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

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

当窗口小于 400 像素高时，应该出现滚动条，并且黄色框应该出现在滚动区域的底部。基本上我不想让黄色框出现在红色框上方，或者反之亦然。 -反之亦然。不起作用

有人知道我如何实现这一目标吗？

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泪痕残 2024-08-08 22:58:57

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

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

回复收藏 0 原文

━╋う一瞬間旳綻放 2024-08-08 22:58:57

z-index 就是你所需要的。虽然 1000 有点太多了，但一个简单的方法

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

就可以了

z-index is what you need. although 1000 is a bit excessive a simple

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

would do the trick

回复收藏 0 原文

緦唸λ蓇 2024-08-08 22:58:57

请记住，在不指定 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 指定比 #logo 更大的数字。 code>#footer 会导致 #logo 更高。

当视口窗口 < 时强制使用滚动条 400 像素,

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

It's useful to remember that, without specifying z-index, the elements stack up with the latest element 'highest' in the z-order. So, if you wanted to avoid specifying z-index, reverse the 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>

Otherwise, as the other answer suggest, specifying a greater number for the #logo than for the #footer will cause #logo to be higher.

To enforce scrollbars when the view-port window is < 400px,

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

回复收藏 0 原文

孤者何惧 2024-08-08 22:58:57

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

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

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

回复收藏 0 原文

风柔一江水 2024-08-08 22:58:56

将其添加到 #wrapper 的 CSS 中：

height: 100%;
position: relative;

此方法有效的原因是因为绝对定位的元素由于缺少任何其他包含块。通过将 position:relative 添加到 #wrapper（或 body），您可以确保包含块成为整个正文内容反而。

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

Add this to the CSS for #wrapper:

height: 100%;
position: relative;

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.

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

回复收藏 0 原文

~没有更多了~