有一点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