有一点z-index麻烦

Question

尝试将此处显示的布局http://www.reversl.net/zindex/看起来像附加的图像要澄清......徽标（标题的一部分）需要覆盖图像。图像需要与标题的底部完美对齐。我知道这可以用z-index实现，但我究竟能怎么做呢？

header {
width: 100%;
height: 30px;
background: #222;
position: relative;
z-index: 3000;
}

#login {
width: 30%;
float: right;
text-align: right;
padding: .5em 0;
z-index: 5000;
}

#logo {
    width: 25%;
    float: left;
    padding: 3em 3em 1em 3em;
    text-align: center;
    z-index: 9999;
    background: #222;
}

.logo-text {
font: 2em/1em "lucida grande";
display: inline-block;
color: #777;
}  

#bg {
margin: -2em 0 0 0;
clear: both;
}

Answer 1

#login {
    float: right;
    text-align: right;
    width: 30%;
    z-index: 5000;
}

#logo {
    background: none repeat scroll 0 0 #222222;
    float: left;
    padding: 3em 3em 1em;
    position: absolute;
    text-align: center;
    width: 25%;
    z-index: 9999;
}


.wrap-inner {
    margin: 0 auto;
    max-width: 1216px;
    position: relative;
    width: 95%;
}

已添加到#logo - postion: absolute,和.wrap-inner - position: relative;

还删除了#login

的填充

Answer 2

选中此fiddle

我一直使用的是position: absolute内的position: relative div。

Answer 3

约z-index不是position

.wrap-inner {
     margin: 0 auto;
     max-width: 1216px;
     position: absolute;
     width: 95%;
}

MDN explanation of absolute positioning

  

[...]在放置其他元素时，绝对定位的元素从流中取出，因此不会占用空间。

Answer 4

这实际上不是z-index如何工作的特定解决方案，但在这个具体示例中，它可能是更好的方法：

您可以将图像作为html元素丢失，而不是在身体上设置背景图像：

body{
  background-image: url(http://www.reversl.net/zindex/bk.jpg);

  /* Set top position on background image 30px down (header height value): */
  background-position: 0px 30px;

  /* Also in CSS3 it is possible to set size: */
  background-size: 100% Auto;
}