CSS z-index（堆叠上下文）

发布于 2024-12-26 15:00:04 字数 885 浏览 1 评论 0原文

我想知道我想做的事情是否可能，因为我无法让它工作：

<body>
    <header>
        <panel>
            <login>
            </login>
        </panel>
    </header>
    
    <content>
    </content>
</body>

这是我想要的层次结构：

above < code>
同时下
和 <面板>
<登录> 以上 <内容>

其他信息：

是一个 position:absolute 登录表单，根据需要从

下方滑落，但应保持在

上方页面的

希望你能帮助我..

原文

I wanted to know if what I want to do is even possible, since I couldn't get it to work:

<body>
    <header>
        <panel>
            <login>
            </login>
        </panel>
    </header>
    
    <content>
    </content>
</body>

Here's the hierarchy I want:

<panel> above <header>
<login> under both <header> and <panel>
<login> above <content>

Additional Info:

<login> is a position: absolute login form which slides down from beneath the <header> on demand but should remain above the page's <content>

Hope you could help me out..

分享到QQ

分享到微博

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

发布评论

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

﹎☆浅夏丿初晴 2025-01-02 15:00:04

遗憾的是，子节点的 z-index 不能低于其祖先节点。要获得您想要的效果，您必须将 login 移到 header 之外。

示例

<header>
 <div class="panel"><!-- Panel Here --></div>
</header>
<div class="login"><!-- Log In Here --></div>
<div class="content"><!-- Content Here --></div>

注意：我稍微更改了您的标记以符合 HTML 标准。如果您希望继续使用无效标记，只需将

替换为和相应的

; 与，其中 XXX 是 class 属性的值。

Regrettably, child nodes cannot have a z-index lower than their ancestors. To get the effect you want, you would have to move login outside of header.

Example

<header>
 <div class="panel"><!-- Panel Here --></div>
</header>
<div class="login"><!-- Log In Here --></div>
<div class="content"><!-- Content Here --></div>

Note: I've changed your markup slightly to conform to HTML standards. If you wish to continue using the invalid markup, simply replace <div class="XXX"> with <XXX> and corresponding </div> with <XXX> where XXX is the value of the class attribute.

回复收藏 0 原文

~没有更多了~