Cannot arrange layout with z-index - html

Question

HTML
<div id='divTop'>divTop<br>divTop<br>divtop</div>
<div id='btnHome'>Home</div>
<div id="player">player<br>player<br>player</div>
CSS
body{
position:relative;
max-width:1024px;
height:100%;
margin:0 auto;
font-family: "Trebuchet MS", sans-serif;
text-align:center;
}
#divTop{
display:none;
position:relative;
z-index:5;
text-align:center;
background:#008080;
border-bottom:medium ridge #D10000;
}
#btnHome{
cursor:pointer;
position:absolute;
top:1.5vh;
left:1vw;
max-width:3.4vw;
z-index:6;
}
#player{
display:none;
position:relative;
z-index:3;
max-width:95vmin;
max-height:95vmin;
border:medium ridge #ffffff;
border-radius:9px;
}
JS
y = $(window).innerHeight() - $('#player').height();
$('#player').css ('margin-top', y/2);
$('#player').show();
$("#btnHome").click(function() {
$('#divTop').slideToggle('slow');
});
Why is btnHome inside player. It should be fixed on top-left of page ?
Clicking on btnHome why is player pushed down ? It should be also fixed. I just want to show-hide divTop by overlapping everything bellow.
fiddle is here

Answer 1

Remove position:relative from body.
UPDATE: add a parent wrapper to the #divTop
#wrapper {
width:100%;
overflow:hidden;
}
#divTop{
position:relative;
z-index:5;
text-align:center;
background:#008080;
border-bottom:medium ridge #D10000;
}
JS
var dTHei = $('#divTop').outerHeight(); //get height of the #div top
$('#wrapper').height(dTHei); //set it as the height of the wrapper
$('#divTop').hide(); // hide the div top
//run your function here
http://jsfiddle.net/2zAm5/1/

Answer 2

Try changing position from relative to absolute
and use top,bottom,right and left instead.

Answer 3

change positions of btnHome and player to fixed, and also use top property for player so it will not move: e.g. top : 200px.
#divTop{
display:none;
position:relative;
z-index:5;
text-align:center;
background:#008080;
border-bottom:medium ridge #D10000;
}
#btnHome{
cursor:pointer;
position:fixed;
top:1.5vh;
left:1vw;
max-width:3.4vw;
z-index:6;
}
#player{
display:none;
position:fixed;
z-index:3;
max-width:95vmin;
max-height:95vmin;
border:medium ridge #ffffff;
border-radius:9px;
top:200px;
}