html - 表格超出容器并位于导航栏后面

标签 html css navbar css-tables

我从网上下载了一个模板表格并编辑成我想要的样子，但由于某种原因它忽略了分配给它的(我真的不能很好地解释它，你会在图片中看到它)，但这不是唯一的问题；我的下拉导航栏位于表格后面(以及我在主页上的图像 slider 后面) .我确实有它，所以每当有人滚动导航栏(和页脚)时，它们都会停留在原处，也许这与它有关，我不知道...

这是我的html代码:

<head>
<meta name="Copyright" content="Copyright XylCro Gaming 2015 - All Rights Reserved.">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gear/PC Specs</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- don't forget! -->
<link rel="stylesheet" type="text/css" href="style/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script>
$(window).scroll(function() {
                if ($(window).scrollTop() > 200)/*header hight*/ {
                    $('#nav').addClass('stuck');
                } else {
                    $('#nav').removeClass('stuck');
                }

            });
</script>
<script>
$(function(){
  $('a').each(function() {
    if ($(this).prop('href') == window.location.href) {
      $(this).addClass('current');
    }
  });
});
</script>
<title>Untitled Document</title>
</head>

<body>
<div id="container_wrapper">
    <div id="wrapper">
        <div id="header">
            <div id="social_bar">
                <ul>
                    <li><a class="twitch" rel="external" href="http://www.twitch.tv/xylcro" target="_blank"></a></li>
                    <li><a class="youtube" rel="external" href="https://www.youtube.com/channel/UCSifAEUVDHNQ3mUFUGrUlGA" target="_blank"></a></li>
                    <li><a class="twitter" rel="external" href="https://twitter.com/xylcro" target="_blank"></a></li>
                    <li><a class="facebook" rel="external" href="https://www.facebook.com/XylCro" target="_blank"></a></li>
                </ul>
            </div>
        </div>
                    <!-- div socialbar and logo -->
        <div id="nav">
            <div id="nav_wrapper">
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li> <a href="news.php">News</a></li>
                    <li><a href="#">XylCro</a>
                        <ul>
                            <li><a href="about.php">About</a></li>
                            <li><a href="#">Gear/PC Specs</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Archives</a>
                        <ul>
                            <li><a href="#">Twitch Archive</a></li>
                            <li><a href="#">YouTube Videos</a></li>
                        </ul>
                    </li>
                    <li> <a href="#">Community</a>
                        <ul>
                            <li><a href="#">Forum</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!-- other divs -->
<div id="content">
    <div class="setup_wrapper">  
        <div class="setup scale">
            <span class="setup_title">Test Title</span>
                <ul class="features">
                    <li class="features_li">Test 1</li>
                    <li class="features_li">Test 2</li>
                    <li class="features_li">Test 3</li>
                    <li class="features_li">Test 4</li>
                    <li class="features_li">Test 5</li> 
          </ul>
        </div>
    </div>
</div>
<div id="footer">
            <p>Copyright &copy; XylCro Gaming 2015 - All Rights Reserved</p>
      </div>
    </div>
</div>
</body>
</html>

我的 CSS 代码:

@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
hr{
    display:block;
}
html{
    background-image:url(img/static/bg.jpg);
    background-repeat:repeat;
    background-position:top center;
}
#container_wrapper{
    height:100%;    
}
body{
    font-family: 'Open Sans', sans-serif;
    font-size:1em;
    line-height:1.4;
    margin:0;
}
#wrapper{
    background-color:#F4F4F4;
    /*background-image:url(img/static/headertest.fw.png);
    background-position:top center;
    background-repeat:no-repeat;*/
    padding:0;
    width:100%;
    height:auto;
    min-height:100%
}
#header{
    background-image:url(img/static/header.png);
    /*background-color: #F00;*/
    background-position:center;
    width: 1100px;
    height: 200px; /* need to change */
    margin:0 auto;
    position:relative;

}
#scoial_bar{
    float:left;
    text-align:left;
    margin:0;
    padding:0;

}
#social_bar ul{
    padding:0;
    margin:0;
    position:absolute;
    bottom:1;
}
#social_bar ul li{
    list-style:none outside none;
    padding:0;
    margin:6 0 0 15;
    display:inline-block;
}
#social_bar ul li a{
    height:50px;
    background-repeat:no-repeat;
    background-position:bottom;
    display:inline-block;
}
#social_bar ul li a.twitch{
    background-image:url(img/static/social/twitch_small.png);
    width:49px;
    margin:0 0; 
    text-indent:9999px;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
#social_bar li a.twitch:hover{
    background-image:url(img/static/social/twitch_small_hover.png);
}
#social_bar ul li a.youtube{
    background-image:url(img/static/social/youtube_small.png);
    width:72px;
    margin:0 0;
    text-indent:9999px;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
#social_bar li a.youtube:hover{
    background-image:url(img/static/social/youtube_small_hover.png);
}
#social_bar ul li a.twitter{
    background-image:url(img/static/social/twitter_small.png);
    width:63px;
    margin:0 0;
    text-indent:9999px;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
#social_bar li a.twitter:hover{
    background-image:url(img/static/social/twitter_small_hover.png);
}
#social_bar ul li a.facebook{
    background-image:url(img/static/social/facebook_small.png);
    width:28px;
    margin:0 0; 
    text-indent:9999px;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
#social_bar li a.facebook:hover{
    background-image:url(img/static/social/facebook_small_hover.png);
}
/* social and logo */
.stuck{
    position:fixed;
    z-index:1;
    width:100%;
    top:0;
}
#nav {
    background-color: #222;
    opacity: 0.9;
    filter: alpha(opacity=50);
    box-shadow: 0 4px 6px -2px rgba(0,0,0,0.4);
}
#nav_wrapper {
    width: 1100px;
    margin: 0 auto;
    text-align: left;
}
#nav ul {
    -webkit-font-smoothing:antialiased;
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px;
}
#nav ul li {
    display: inline-block;
}
#nav ul li:hover {
    background-color: #333;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
#nav ul li a, visited {
    color: #CCC;
    display: block;
    padding: 15px;
    text-decoration: none;
}
#nav ul li a: active {
    color: #F70;
    display: block;
    padding: 15px;
    text-decoration: none;
}
#nav ul li:hover ul {
    display: block;
    box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color: #333;
    /*border: 5px solid #222;*/
    border-top: 0;
    margin-left: 0;
}
#nav ul ul li {
    display: block;
}
#nav ul ul li a:hover {
    color: #699;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
#content{
    background-color:#FFF;
    width:1100px;
    text-align:center;
    margin:-20px auto;
    padding-top:3em;
    padding-bottom: 3em;

}
/* content and other divs */
#footer{
    color:#CCC;
    background-color: #222;
    opacity: 0.9;
    filter: alpha(opacity=50);
    height:50px;
    clear: both;
    position: fixed;
    margin-top: -3em;
    z-index:1;
    width:100%;
    bottom:1;
    margin:auto;
    text-align:center;
    box-shadow: 0 -4px 8px -2px rgba(0,0,0,.4);
}
.setup_wrapper {
    width:250px;
    margin-left:10px;
    margin-top: 50px;
}
.setup {
    width: 250px;
    background: #0F1012; 
    color: #f9f9f9;
    float: left;
}
.setup .setup_title {
    display: block;
    width: 250px;  
    background: #292b2e;
    margin: 15px 0 10px 0;
    text-align: center;
    font-size: 23px;
    padding: 17px 0 17px 0;
}
.features{
    display: block;
    margin: 20px 0 10px 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    color: #999999;
}
.features_li{
    display: block;
    margin: 10px 0 0 0;
}
.scale {
    transform: scale(1.2);
    box-shadow: 0 0 4px 1px rgba(20, 20, 20, 0.8);
}
.scale .setup_title {
    color: #64AAA4;
}

有问题的图像:http://i1346.photobucket.com/albums/p683/dcf007/stupid%20site_zpsrtrctx3j.png

最佳答案

添加 z-index 要求您还向元素添加定位。

#nav {
    position: fixed;
    z-index: 1000;
    background-color: #222;
    opacity: 0.9;
    filter: alpha(opacity=50);
    box-shadow: 0 4px 6px -2px rgba(0,0,0,0.4);
}

关于html - 表格超出容器并位于导航栏后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31346372/

上一篇：javascript - 音频应该在被重定向到链接之前播放

下一篇：html - 为什么我们在 width 属性中写 calc ？宽度 :100% - 80px; = width:calc(100% - 80px);

相关文章：

javascript - 如何获取 radio oncheck 上特定 div 的源代码？

javascript - 如何消除 Bootstrap 中列排序之间的差距

javascript - Angular 4通过主机监听器更新输入文本值

css - 如何使用 CSS 将红点放在所选元素之前？

html - 如何在html导航栏上删除“ margin ”？

html - css:我无法应用背景颜色

javascript - 如何调整二维码大小？

css - 关于 Michael Hartl 的(优秀的)Rails 教程的第 7 章练习 2

html - Bootstrap 3 导航栏分离折叠菜单项和非折叠

html - MVC - Bootstrap 3.0 - 更改导航栏文本

©2024 IT工具网  联系我们