Question

我有以下代码：

<body> 
  <div id="boarder">
     <div id="player-time"></div>
  .
  .
  .
  </body>
#player-time{
  background-color: green;
  height:30px;
  width: 150px;
  position:absolute; 
  top: 0px;
  left:100px;  
  border-top-right-radius: 30px; 
  border-top-left-radius: 30px; 
  text-align: center;
  color: white;
  z-index: -10;  
}
#boarder{
  background-color: #5FBAAC;
  height: 350px;
  width: 350px;  
  position: relative;
  margin: 10% auto auto auto;
  padding-top: 30px;
  border-radius: 30px;  
  z-index: 10;
}

id＃player-time正显示在边界元素前面。有人可以解释为什么z-index属性不起作用吗？

Answer 1

检查我发布的两个例子：

第一个child/parent z-index不是同一级别，默认情况下，子级将高于父级。但是如果你在孩子身上使用负z-index而且没有在父母那里定义z-index，你的孩子就可以低于父母。

第二个same level z-index在同一级别，z-index表示它是如何堆叠的

＆＃13;

#player-time{
  background-color: green;
  height:100px;
  width: 300px;
  position:absolute; 
  top: -50px;
  left:-50px;  
  text-align: center;
  color: white;
  z-index: -10;
}
#boarder{
  background-color: red;
  height: 50px;
  width: 350px;  
  position: relative;
  margin: 10% auto auto auto;
  text-align: center;
  padding-top: 30px;
  border-radius: 30px;
}


#player-time-test{
  background-color: green;
  height:100px;
  width: 300px; 
  text-align: center;
  color: white;
  z-index: -10;   
}
#boarder-test{
  top: -50px;
  left: 50px; 
  background-color: red;
  height:100px;
  position: relative;
  width: 300px;  
  text-align: center;
  border-radius: 30px;
  z-index: 10; 
}

＆＃13;

<h2>child/parent z-index</h2>
<div id="boarder">
     <div id="player-time">[child] Player-time(z-index: -10)</div>
     [parent] boarder (no z-index)
</div>




<h2>same level z-index</h2>
<div>
     <div id="player-time-test">Player-time(z-index: -10)</div>
     <div id="boarder-test">boarder(z-index: 10)</div>
</div>

＆＃13;

Answer 2

z-index对兄弟姐妹（即同一级别）只有影响，而不是孩子...

Answer 3

只需删除父元素的z-index - ＆gt; duplicate question

#player-time{
  background-color: green;
  height:30px;
  width: 150px;
  position:absolute; 
  top: 0px;
  left:100px;  
  border-top-right-radius: 30px; 
  border-top-left-radius: 30px; 
  text-align: center;
  color: white;
  z-index: -10;  
}
#boarder{
  background-color: #5FBAAC;
  height: 350px;
  width: 350px;  
  position: relative;
  margin: 10% auto auto auto;
  padding-top: 30px;
  border-radius: 30px;  
}

<div id="boarder">
     <div id="player-time"></div>
</div>

Z-index在我的代码中不起作用

3 个答案: