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。

小提琴是here

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

尝试将位置从相对位置更改为绝对位置

并改为使用top，bottom，right和left。

Answer 3

将btnHome和玩家的位置更改为固定，并且还为玩家使用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;  
 }

无法使用z-index排列布局

3 个答案: