html - z-index でレイアウトを配置できません

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

なぜbtnHome中にあるplayer。ページの左上に固定する必要がありますか?

btnHomeなぜ押し下げられたのplayerですか？これも修正する必要があります。divTop以下のすべてを重ねて表示/非表示にしたいだけです。

フィドルはこちら

Answer 1

から削除position:relativeしbodyます。

更新:親ラッパーをに追加します#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

btnHome とプレーヤーの位置を固定に変更し、プレーヤーに top プロパティを使用して移動しないようにします (例: 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;  
 }

Answer 3

相対位置から絶対位置に変更してみてください

代わりに、上、下、右、左を使用します。