实施例

Question

我想知道我想做什么是可能的，因为我无法让它工作：

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

    <content>
    </content>
</body>

这是我想要的层次结构：

<panel> 以上 <header>
<login> <header> 和 <panel>
<login> 以上 <content>

其他信息：

<login>是position: absolute登录表单，可根据需要从<header>下方向下滑动，但应保持在页面的<content>

希望你能帮帮我..

Answer 1

令人遗憾的是，子节点的祖先不能低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标准。如果您希望继续使用无效标记，只需将<div class="XXX">替换为<XXX>，将</div>替换为<XXX>，其中XXX是{{1}的值属性。

CSS z-index（堆叠上下文）

1 个答案:

实施例