2012-01-12 57 views
2

我想知道如果我想要做的,甚至有可能,因为我无法得到它的工作:CSS的z-index(堆叠上下文)

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

    <content> 
    </content> 
</body> 

这是我想要的层次结构:

  1. <panel>上述<header>
  2. <login>下既<header><panel>
  3. <login>上述<content>

附加信息:

<login>是从<header>下方滑落的需求,但应保持网页上面的<content>

一个 position: absolute登录表单

希望你能帮助我..

+1

你有什么试过?在这一点上,理想情况下,你至少应该有一个基础风格的工作。 – BoltClock 2012-01-12 16:35:05

+0

如果登录不一定是头部和面板的孩子,则可能是这样。有关堆叠顺序的详细说明,请参见[https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context](https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context) – j08691 2012-01-12 17:57:43

回答

3

遗憾的是,子节点不能比他们的祖先低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>,其中XXXclass属性的值。

+0

无效标记只是为了让这个例子更清晰:) – tamir 2012-01-13 14:25:39

+0

@tamir,认为可能是这样,但你永远不知道:P很高兴我能帮上忙! – 0b10011 2012-01-13 14:35:07