Z-index not working in my code

Question

I have the following code:

<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;
}

The id #player-time is being displayed in front of the boarder element. Can someone explain me why the z-index property is not working?

The stacking context https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context — YoungLearnsToCoding, Mar 27 '17 at 20:38
Possible duplicate of [How to get a parent element to appear above child](http://stackoverflow.com/questions/1806421/how-to-get-a-parent-element-to-appear-above-child) — Lemnis, Mar 27 '17 at 21:38

Dalin Huang · Answer 1 · 2017-04-01T20:06:25.923

check the two example I posted:

1st child/parent z-index not same level, by default child will above parent. but if you use negative z-index at child and do not define z-index at parent, your child can go below parent.

2nd same level z-index at same level, z-index indicate how it stack

#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; 
}

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

Hi @user3078356, Welcome to stackOverflow, If any answer helps you [vote it up](http://meta.stackexchange.com/questions/173399/how-to-upvote-on-stack-overflow), If the answer is what you looking for mark it as [Correct answe](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) for the future readers. Thank you! — Dalin Huang, Apr 22 '17 at 04:09

score 1 · Answer 2 · answered Mar 27 '17 at 20:34

1

z-index has only an effect on siblings (i.e. on the same level), not children...

answered Mar 27 '17 at 20:34

Wim Mertens

1,780
3
20
31

score -1 · Answer 3 · answered Mar 27 '17 at 21:41

Just remove the z-index of the parent element --> 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 not working in my code

3 Answers3

Linked