使用z-index定位三个div
使用z-index定位三个div
提问于 2013-01-15 05:50:27
<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
Stack Overflow用户
回答已采纳
发布于 2013-01-15 06:05:36
很简单，你不能做到这一点并且100%支持跨浏览器(参见使用psuedo元素的mookamafoob给出的答案:after重建红框(不支持< IE8))。
因为红色和蓝色div包含在绿色中，所以不能将红色的堆叠上下文推到它上面。
我已经创建了一个简单的fiddle，其中包含z索引和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;
}据我所知，这是不可能的，我相信有人会使用正确的术语来解释为什么在浏览器渲染引擎中会发生这种情况(有人吗？)
Stack Overflow用户
发布于 2013-01-15 05:52:33
要使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;
} Stack Overflow用户
发布于 2013-01-15 08:10:10
从技术上讲，使用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的例子，它位于其他两个之间。这可能不是最优雅的解决方案，但它适用于您提供的场景。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14327393
复制相关文章
相似问题
腾讯云开发者
