0 
<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

4

4 回答 4

3

要使 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;
}
于 2013-01-14T21:52:33.213 回答
1

很简单，您不能这样做并且 100% 支持跨浏览器（请参阅mookamafoob使用伪元素 :after 重新创建红框（不支持 < IE8）的答案）。

因为红色和蓝色 div 包含在绿色中，所以您不能将红色的堆叠上下文推到它上面。

我已经创建了一个简单的小提琴，其中需要什么是 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;
}

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

于 2013-01-14T22:05:36.347 回答
1

从技术上讲，它实际上是可能的，使用 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";

}

并做一些其他的调整，你会得到这个例子，它位于其他两个之间。它可能不是最优雅的解决方案，但它适用于您提供的场景。

于 2013-01-15T00:10:10.240 回答
0

而不是弄乱 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>
于 2013-01-14T22:06:49.327 回答