css - 有一点 z-index 麻烦

Question

试图让这里显示的布局http://www.reversl.net/zindex/看起来像附加到 clarfiy 的图像......徽标（这是标题的一部分）需要覆盖图像。图像需要与标题的底部完美对齐。我知道这可以使用 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

检查这个小提琴

我一直使用的是一个position: absolute里面的一个div position: relative。

Answer 3

不是关于z-index是关于position

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

MDN解释绝对定位

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

Answer 4

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

您可以将图像松散为 html 元素，而是在 body 上设置背景图像，如下所示：

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;
}