Question

有人可以告诉我为什么体育运动会停留在顶级，而军队和

娱乐节目在哪里下降？

基本上，我试图将所有三个主题放在同一个地方

显示的原因：无是因为JQuery正在努力显示

    #topBar {
        position: relative;
        top: 0px;
        left: 0px;
        height: 100px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        background-color: #000000;
        color: #ffffff;
        text-align: left;
    }
    #topBar span {
        position: absolute;
        bottom: 0;
    }
    #topBar a {
        color: #ffffff;
        text-decoration: none;
    }
    #Sport {
        position: absolute;
        display: none;
        top: 500px;
    }
    #Entertainment {
        position: absolute;
        display: none;
        top: 500px;
    }
    #Military {
        position: absolute;
        display: none;
        top: 500px;
    }


HTML:


<!DOCTYPE html>

<head> <meta charset="utf-8" /> 
<title>Matthew Jameson | Virtual Reality</title>  
<link rel="stylesheet" href="VR3.css" type="text/css" />
<script src="jquery.js"></script>
</head>


<html lang="en" >
    <head>
        <meta charset="utf-8" />
         <script src="http://code.jquery.com/jquery-latest.js"></script>
        <title></title>
    </head>
    <body>
        <header>

        </header>

<Div id = "topBar">
<span>
<a id='slink' class='trigger' href='#Sports'>Sports</a>
<a id='elink' class='trigger'  href='#Entertainment'>Entertainment</a >
<a id='mlink' class='trigger' href='#Military'>Military</a>

<span>
</div>

<Div id = "main">
</div>
<div id='Sports' class='slink triggered'>
<iframe width="280" height="158" src="http://www.youtube.com/embed/RPPJ5JHwO4A?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="280" height="158" src="http://www.youtube.com/embed/oMLarxR-q08?rel=0" frameborder="0" allowfullscreen></iframe>

</div>

<Div id = "Entertainment" class='elink triggered'>
<iframe width="280" height="158" src="http://www.youtube.com/embed/7vcGqha6xJ0?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="280" height="158" src="http://www.youtube.com/embed/La-WRhYeMCw?rel=0" frameborder="0" allowfullscreen></iframe>

</div>

<Div id = "Military" class='mlink triggered'>
<iframe width="280" height="158" src="http://www.youtube.com/embed/6p7FM-mBsNk?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="280" height="158" src="http://www.youtube.com/embed/g1afRyN5_MQ?rel=0" frameborder="0" allowfullscreen></iframe>

</div>
<script>

$('.trigger').on('click',function(){
    $('.triggered').slideUp(500);
    var x = $(this).attr('id');
    $('.' + x ).slideDown(500);
});





</script>




    </body>
</html>

Answer 1

这是因为在你的CSS中，你的选择器是#Sport，但在你的HTML中它是#Sports。匹配名称，你应该很好。

Answer 2

使用Z-index，值越大，元素的优先级越高，它将显示在顶部。

使用div定位CSS

2 个答案: