Question

我又遇到了一个问题。我刚刚更新了我的Arcade页面，我希望它拥有与我网站其他部分不同的导航栏。当我将每个div用作position:relative; div的标签时，效果很好。但是我希望标签能够保持在游戏中的任何位置。

我将标签更改为position:fixed并停止了工作。使我的所有标签彼此重叠，因此您只能看到一个。我正在研究这个问题，并在文章中找到了它。 This article讨论将所有position:relative div放在一个固定位置div中。我试过了，但它没有用。

我正在使用PHP文件来保留这些标签。

这是我头文件中的HTML：

<body>
    <br />
  <div id="gamenav-fixed"><center><a href="/"><div class="game-home">Home</div></a><a href="/arcade/action"><div class="game-nav">Action</div></a><a href="/arcade/arcade"><div class="game-nav">Arcade</div></a><a href="/arcade/puzzle"><div class="game-nav">Puzzle</div></a><a href="/arcade/vehicle"><div class="game-nav">Vehicle</div></a><a href="/arcade/violence"><div class="game-nav">Violence</div></a><a href="/arcade/defense"><div class="game-nav">Defense</div></a><a href="/arcade/rpg"><div class="game-nav">Role Playing</div></a><br /><br /></div>
  <div class="text-center"><font face="lucida console" size="12px" color="#686868">Game</font><font face="baskerville old face" size="12px" color="#888888"><b>Shank</b></font></br></br></div>
</body>

以下是我用于这些标签的CSS：

/* The following is for the arcade page navigation! */
/* Center navigation. */
    div#gamenav-fixed:{
        position:fixed;
    }
    .game-nav{
        border:0px;
        padding:9px 25px 10px 25px;
        box-shadow:0px 0px 0px 0px;
            transition: .5s;
            -moz-transition: .5s;
            -webkit-transition: .5s;
        font-family:arial;
        color:#909090;
        text-size:12px;
        text-align:center;
        display:inline;
        position:relative;
        background-color:#e0e0e0;
    }
        .game-nav:hover{
            border:0px solid #686868;
                transition: .5;
                -moz-transition: .5;
                -webkit-transition: .5;
            background:#c0c0c0;
            color:#202020;
        }
            .game-nav:active{
                border:0px solid #686868;
                    transition: .5;
                    -moz-transition: .5;
                    -webkit-transition: .5;
                box-shadow:0px 0px 10px 1px #a0a0a0 inset;
                background:#d0d0d0;
                color:#202020;
            }
    .game-home{
        border:0px;
        padding:9px 25px 10px 25px;
        box-shadow:0px 0px 0px 0px;
            transition: .5s;
            -moz-transition: .5s;
            -webkit-transition: .5s;
        font-family:arial;
        color:#202020;
        text-size:12px;
        text-align:center;
        display:inline;
        background-color:#c0c0c0;
        position:relative;
    }
        .game-home:hover{
            border:0px solid #686868;
                transition: .5;
                -moz-transition: .5;
                -webkit-transition: .5;
            background:#e0e0e0;
            color:#909090;
        }
            .game-home:active{
                border:0px solid #686868;
                    transition: .5;
                    -moz-transition: .5;
                    -webkit-transition: .5;
                box-shadow:0px 0px 10px 1px #a0a0a0 inset;
                background:#d0d0d0;
                color:#202020;
            }

/* Ends arcade navigation! */

我的网站是gameshank.com。并提前感谢！

Answer 1

首先你在CSS中有错误

div#gamenav-fixed:{

应该没有“：”

对我而言，它并没有重叠，唯一的东西是将它设置为100％，因此它与整个页面一样宽并且居中。

div#gamenav-fixed {
    position: fixed;
    width: 100%;
}

如果您遇到此问题，可以粘贴整个HTML吗？也许doctype或者类似的问题存在问题，这可能导致页面在每个浏览器中都没有正确呈现。也许您还可以说明您正在使用哪种浏览器。

这里有jsfiddle证明这是有效的：

http://jsfiddle.net/Ed8T8/1/

Answer 2

根据您的实际情况（gameshank.com），您的CSS应如下所示：

.nav {
    /* ----- */
    margin: 0px;
    left: 0px;
    position: fixed;
    width: 100%;
    /* ----- */

    background: #989898;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #989898 0%, #d0d0d0 77%, #d0d0d0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#989898), color-stop(77%,#d0d0d0), color-stop(100%,#d0d0d0));
    background: -webkit-linear-gradient(top, #989898 0%,#d0d0d0 77%,#d0d0d0 100%);
    background: -o-linear-gradient(top, #989898 0%,#d0d0d0 77%,#d0d0d0 100%);
    background: -ms-linear-gradient(top, #989898 0%,#d0d0d0 77%,#d0d0d0 100%);
    background: linear-gradient(to bottom, #989898 0%,#d0d0d0 77%,#d0d0d0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#989898', endColorstr='#d0d0d0',GradientType=0 );
}

把许多<div>放在一个位置：固定</div>

2 个答案: