-1

我完全迷失了，我刚刚完成了导航栏的设置，现在我似乎无法在固定位置以外的任何其他位置显示设置图标和主要文本......这是我的代码示例，它无法显示图片

这是整个相关代码、html 以及 css。

最终结果应该是一个导航栏，类似于 facebook 用于“群组”的导航栏。

HTML（PHP）：

    <div style='width:100%;max-height:31px;position:relative;top:1px;overflow:hidden;'>

        <div style='width:2000px;max-height:31px;position:relative;overflow:hidden;'>

            <div class='groups_navi-active' id='navbar-groupname'>

                <div style='height:30px;float:left; width:11px;'>
                </div>

                <div style='height:30px;float:left;'>
                ".$navbar_groupname."
                </div>

                <div style='height:30px;float:left;width:11px;'>
                </div>

            </div>


            <div class='groups_navi-inactive' id='navbar-structure'>

                <div style='height:30px;float:left; width:11px;'>
                </div>

                <div style='height:30px;float:left;'>
                Structure
                </div>

                <div style='height:30px;float:left;width:11px;'>
                </div>

            </div>

            <div class='groups_navi-inactive' id='navbar-explore'>

                <div style='height:30px;float:left; width:11px;'>
                </div>

                <div style='height:30px;float:left;'>
                Explore!
                </div>

                <div style='height:30px;float:left;width:11px;'>
            </div>

        </div>



        <div class='groups_navi-right'>

        </div>


    </div>





    <div style='float:right;position:fixed;top:42px;height:22px;width:796px;z-index:1'>

        <div class='groups_navi-settingsicon' id='groups_navi-settingsicon' ></div>

        <div style='clear:both;'></div>

<!-- THIS IS HIDDEN AND WILL BE MADE VISIBLE WITH JAVASCRIPT !-->    
        <div id='navbar-settings-list' style='border-left:1px solid #787878;border-right:1px solid #787878;border-top:1px solid #787878;background-color:#ffffff;border-bottom:2px solid #283d6c;background color:#ffffff;float:right;display:none;z-index:5;'>
            <div style='width:126px;height:4px;'></div>
            <div class='groups-navi-settings-list_option-inactive' id='groups-navi-settings-list_option--deletegroup' title='".$_GET['groupid']."'>
            Delete Group
            </div>
            <div style='width:126px;height:4px;'></div>
        </div>

    </div>







    <div style='z-index:8;position:fixed;width:796px'>

        <div>
        <img src='IMG/texticon.png'>
        </div>
        <div>
        ".$groupoverview_groupdescription."
        </div>
    </div>

CSS：

.groups_navi-active
{
height:30px;position:relative;line-height:30px;
font-size:13px;
font-weight:bold;
color:#000000;
float:left;
z-index:2;
}

.groups_navi-inactive
{
float:left;
height:30px;
position:relative;
background-color:#f2f2f2;
border-bottom:1px solid #cccccc;
border-left:1px solid #dbdbdb;
border-right:0px;
border-top:0px;
line-height:30px;
font-size:11px; 
font-weight:bold;
color:#818181;
z-index:2;
}


.groups_navi-right
{
float:left;
height:30px;
width:1000px;
position:relative;
background-color:#f2f2f2;
border-bottom:1px solid #cccccc;
border-left:1px solid #dbdbdb;
border-right:0px;
border-top:0px;
line-height:30px;
font-size:11px; 
font-weight:bold;
color:#818181;
}


.groups_navi-settingsicon
{
width:31px;height:22px;background: url('../IMG/navbar-stgs.png');float:right;background-position: 0 0;
}


.groups_navi-settingsicon-active
{
width:31px;height:22px;background: url('../IMG/navbar-stgs.png');float:right;background-position: 0 -22;
}

.groups-navi-settings-list_option-inactive
{
width:126px; height: 18px;text-align:center;line-height:18px;
border-top:1px solid #ffffff;
border-bottom:1px solid #ffffff;
}

.groups-navi-settings-list_option-inactive:hover
{
width:126px; height: 18px;text-align:center;line-height:18px;background-color:#6c83b6;color:#f8ffff;
border-top:1px solid #39579b;
border-bottom:1px solid #39579b;
cursor:pointer;
}
4

2 回答 2

0

设置图标的容器（父 div）是位置：固定。这将覆盖你的浮动：对。事实上，我看到两个使用 position:fixed 而不设置 X/Y 偏移的实例，这实际上是行不通的。

如果不是这样...我认为如果您可以将代码归结为有问题的区域，您将获得更好的答案。

于 2012-04-18T09:37:08.327 回答
0

我想你应该检查图像路径，它一定是正确的，我在这个 url http://jsfiddle.net/563Vx/上做了样本

随时更新这个小提琴

于 2012-04-18T09:43:23.450 回答