CODEWITHSUNDEEP
css
user3078356
user3078356

Reputation: 11

Z-index not working in my code

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?

Upvotes: 1

Views: 91

Answers (3)

Dalin Huang
Dalin Huang

Reputation: 11342

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>

Upvotes: 2

Lemnis
Lemnis

Reputation: 482

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>

Upvotes: -1

Wim Mertens
Wim Mertens

Reputation: 1790

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

Upvotes: 1

Related Questions