个人中心
gpt4 book ai didi

css - 将多个
放在一个位置为 :fixed 的内部

转载 作者：行者123 更新时间：2023-11-28 12:15:38 25 4
gpt4 key购买 nike

我又遇到问题了。我刚刚更新了我的 Arcade 页面，我希望它有一个与我站点的其余部分不同的导航栏。当我将用作选项卡的每个 div 都设为 position:relative; div 时，效果很好。但我希望无论您在 Playground 中的哪个位置，选项卡都位于顶部。

我将选项卡更改为 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 .并提前致谢!

最佳答案

首先你的CSS有错误

div#gamenav-fixed:{

应该没有“:”

对我来说它并没有重叠，唯一留下 id 的东西是将它设置为 100%，这样它就和整个页面一样宽并且居中。

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

如果您对此有疑问，可以粘贴整个 HTML 吗？也许文档类型或类似问题存在问题，这可能导致页面在每个浏览器中都无法正确呈现。也许您还可以说明您使用的是哪种浏览器。

这是有效的 jsfiddle 证明:

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

关于css - 将多个 <div> 放在一个位置为 :fixed 的内部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19197720/

25 4 0
文章推荐： css - CSS 中垂直边距的问题
文章推荐： ios - 如何创建委托(delegate)以在单击另一个 View Controller 的按钮时更改一个 View Controller 中的标签名称
文章推荐： javascript - 具有排序问题的流体动态图像布局
文章推荐： css - 为什么这个悬停动画不能正常工作？