有一点 z-index 麻烦答案

【问题标题】：Having a little z-index trouble有一点 z-index 麻烦
【发布时间】：2014-07-19 21:44:06
【问题描述】：

尝试使此处显示的布局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;
}

【问题讨论】：

猜测：添加到img样式：margin-top:-logo_height px;z-index:6000;

标签： css layout z-index css-position

【解决方案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的填充

【讨论】：

考虑到整个网站的设计，Id 使用较低的顺序 z-index，但除此之外，这是 Id say +1

【解决方案2】：

查看fiddle

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

【讨论】：

【解决方案3】：

不是关于z-index 是关于position

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

MDN explanation of absolute positioning

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

【讨论】：

【解决方案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;
}

【讨论】：