0

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通过重叠下面的所有内容来显示隐藏。

小提琴在这里

4

3 回答 3

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/

于 2013-08-12T05:39:55.867 回答
1

将 btnHome 和播放器的位置更改为固定，并且还使用播放器的顶部属性使其不会移动：例如顶部：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;  
 }
于 2013-08-12T06:01:24.260 回答
1

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

并使用 top,bottom,right 和 left 代替。

于 2013-08-12T05:43:45.260 回答