Question

<body>
 <div id="red" class="colorbox"><p>RED</p>
  <div id="green" class="colorbox"><p>GREEN </p>
   <div id="blue" class="colorbox"><p>BLUE</p>
   </div>
  </div>
 </div>
</body>

我怎样才能这样定位：

红色块位于Z轴的另外两个之间;
绿色块放在红色块后面;
蓝色块位于红色块的前面。

类似的东西：

#red { z-index: 2; }
#green { z-index: 1 }
#blue { z-index: 3 }

非常感谢！

更新：

这是我的代码：http://jsbin.com/ihizot/3/edit

Answer 1

要使z-index起作用，您需要在每个元素上设置一个位置：

位置：绝对，位置：相对或位置：固定

示例：

<div id="green" class="colorbox"><p>RED</p>
  <div id="red" class="colorbox"><p>GREEN </p>
   <div id="blue" class="colorbox"><p>BLUE</p>
   </div>
  </div>
 </div>

.colorbox {
  position:relative;
  height:50px;
  width:50px;

}
#red { 
  background:red;
  z-index: 2; 
}
#green { 
  z-index: 1;
  background: green;
}
#blue { 
  z-index: 3;
  background:blue;
}

Answer 2

很简单，你不能这样做并且支持100％跨浏览器（参见mookamafoob使用psuedo元素的答案：after重新创建红色框（不支持＆lt; IE8））。

因为红色和蓝色div包含在绿色中，所以无法推动其上方红色的堆叠上下文。

我创建了一个简单的fiddle，其中包含z-index和css所需的内容，以便在需要时将它们堆叠起来，因为你的标记嵌套“错误”，红色无法在绿色和蓝色的div。

#red {
  position:absolute;
  z-index:2;
  top:15px;
  left:15px;
  height:100px;
  width:100px;
  background-color:red
}
#green
{
  position:absolute;
  top:0px;
  left:0px;
  z-index:1;
  height:100px;
  width:100px;
  background-color:green;
}
#blue
{
  position:absolute;
  z-index:3;
  top:30px;
  left:30px;
  height:100px;
  width:100px;
  background-color:blue;
}

据我所知，我不确定有人会使用正确的术语来解释为什么在浏览器呈现引擎中发生这种情况（任何人？）

Answer 3

从技术上讲，它实际上可能，使用CSS伪元素，它可以在大多数浏览器中使用。如果您使用以下内容重新创建“红色”框：

#red:after {
background-color: #f00;
top: -5px;
left: -5px;
z-index: 2;
position: absolute;
font-weight: bold;
width: 400px;
height: 400px;
border: 5px solid white;
font-size: 70pt;
content:"RED";

}

并做一些其他的调整，你将获得this示例，它位于其他两个之间。它可能不是最优雅的解决方案，但它适用于您提供的方案。

Answer 4

是不是可以改变标记？而不是搞乱Z-index？

<div id="green" class="colorbox"><p>GREEN </p>
    <div id="red" class="colorbox"><p>RED</p>  
      <div id="blue" class="colorbox"><p>BLUE</p>
      </div>
  </div>
</div>

使用z-index定位三个div

4 个答案: