Question

我已经和我的z-indexing摔跤了好几个小时了。我已经阅读了很多关于堆叠上下文如何改变的内容，但它必须超越我的头脑，因为我无法让这个基本的例子起作用。

html：

<div class="container">
       <a href="#" class="under">under</a> 
<a href="#" class="over">over</a>


</div>

CSS：

.container{
    float: left;
background:red
z-index: 1; 
padding-top: 20px;
text-align: center;
margin-top: 50px;
color: white;

    background:red;
    position:fixed;
}

.over{
height: 100%;
width: 100%;
float: left;
}

.under{
height: 100%;
width: 100%;
float: left; 
position: relative;
float: left;
top: -20px;
    z-index:-1;
}

小提琴： http://jsfiddle.net/jpo0y2sL/

我无法将“under”下的链接显示在容器div的背景后面。

Answer 1

你正在写一些更复杂的风格。基本上，任何孩子都不能在它的父母后面，但在你的情况下，如果你想实现它，在父div（.container）上不应该有任何位置。您可以使用以下示例样式实现它：

.container {
    border:1px solid green;
    background-color: #ccc;
}
.under, .over {
    position:relative;
    width:100px;
    height:100px;
}
.under {
    border:1px solid black;
    z-index: -1;
    }
.over {
    border:1px solid red;
}

Answer 2

给链接一个div，以便通过css轻松控制。

<div class="container">
   <div class="under"><a href="#">under</a> </div>
   <div class="over"><a href="#" >over</a></div>
</div>

.over{
 height: 100%;
 width: 100%;
 position: absolute;
 float: left;
 top: -20px;
 z-index:2;
}

.under{
 height: 100%;
 width: 100%;
 position: absolute;
 float: left;
 top: -20px;
 z-index:1;
}

你想做什么来重叠你的两个链接？

Answer 3

除了缺少分号和重复background属性之外，您真正的问题源于首先给予.container z-index。这段代码对我有用，无需创建<div>汉堡：

<div class="container">
    <a href="#" id="under">under</a> 
    <a href="#" class="over">over</a>
</div>

.container{
position: fixed;
background: red;
padding-top: 20px;
text-align: center;
margin-top: 50px;
color: white;
}
.over{
height: 100%;
width: 100%;
float: left;
position: relative;
}
#under{
height: 100%;
width: 100%;
position: relative;
top: -20px;
z-index: -1;
}

作为补充说明，您不能同时浮动和定位元素。

Answer 4

<a href="#" class="under">under</a>
 <div class="container">
  <a href="#" class="over">over</a>
 </div>

.container{
 position: fixed;
 width:100px;
 height:100px;
 background: rgba(0, 0, 0, 0.5);
 z-index:0;
}
.over{
 float: left;
 width:100%;
}
.under{
 width:100%;
 float: left;
 z-index:-1;
 color:orange;
}

试试这个

如何让我的div的第一个孩子出现在div后面？

4 个答案: