Question

http://tylerh.info，我有一个固定的导航栏。但每当我使用属性“position：fixed;”它在它下面留下了一小块空间，导致我的标题不与它接壤。但是，取出该属性不会发生这种情况。

谢谢！

CSS：

.qmmc .qmdivider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
position:relative;
z-index:1;
}

.qmmc .qmdividery{
float:left;
width:0px;
}

.qmmc .qmtitle{
display:block;
cursor:default;
white-space:nowrap;
position:relative;
z-index:1;
}

.qmclear {
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none !important;
}

.qmmc {
position:relative;
z-index:10;}

.qmmc a, .qmmc li {
float:left;
display:block;
white-space:nowrap;
position:relative;
z-index:1;
}

.qmmc div a, .qmmc ul a, .qmmc ul li {
float:none;
}

.qmsh div a {
float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}




    #qm0    
    {   
                background-image: linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        background-image: -o-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        background-image: -moz-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        background-image: -webkit-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        background-image: -ms-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        padding-bottom: 4.5px;
        position:fixed;
        border-color:#A2BFE9;
        margin-top: -4.7em;
        position:fixed;
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #00A3EF;
    }


    #qm0 a  
    {   
        text-align: center;
        padding-top: 18px;
        padding-bottom: 18px;
        padding-left: 18px;
        padding-right: 18px;
        color:#FFFFFF;
        font-family:Karla;
        font-size:100%;
        text-decoration:none;

    }


    #qm0 a:hover    
    {   
           background-image: -moz-linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   background-image: -ms-linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   background-image: -o-linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   background-image: -webkit-linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   background-image: linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   border-bottom-color:#000000;
   border-bottom-style:solid;
    }


    body #qm0 .qmactive, body #qm0 .qmactive:hover  
    {   
        background-color:#808080;
        text-decoration:underline;
        font-size: 80%;
    }



    #qm0 div, #qm0 ul   
    {   padding-top:4px;
        padding-bottom:4px;
        margin:0px 0px 0px -1px;
        background-color:#808080;
        border-width:4px 1px 1px;
        border-style:solid;
        border-color:#285DA8;
    }



    #qm0 div a, #qm0 ul a   
    {   
        padding:2px 40px 2px 5px;
        border-width:0px;
        border-style:none;
    }



        #qm0 div a:hover, #qm0 ul a:hover   
        <ul id="qm0" class="qmmc">

div#header {
    width: 100%;
    margin-bottom: 20px;
    padding-top: 1px;
    /*gradients */
    background-image: -ms-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -moz-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -o-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #006AD4), color-stop(1, #2500A1));
    background-image: -webkit-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: radial-gradient(circle farthest-corner at center, #006AD4 0%, #2500A1 100%);
    /*end gradients*/
    border-bottom: solid 2px #808080;
    padding-top:60px;
}

HTML：

<li><a class="qmparent" href="/">Home</a></li>
<li><a class="qmparent" href="/?page_id=7">Ask a Question</a></li>

<li><a class="qmparent" href="javascript:void(0)">Menu3</a>

    <ul>
    <li><a href="javascript:void(0)">Placeholder1</a> </li>

    <li><a href="javascript:void(0)">Placeholder1</a></li>

    <li><a href="javascript:void(0)">Placeholder2</a></li>
    <li><a href="javascript:void(0)">Placeholder3</a></li>
    <li><a href="javascript:void(0)">Placeholder4</a></li>
    <li><a href="javascript:void(0)">Placeholder5</a></li>
    <li><a href="javascript:void(0)">Placeholder6</a></li>
    </ul></li>


<li><a class="qmparent" href="javascript:void(0)">Categories</a>

    <ul>
    <?php wp_list_categories('title_li=&orderby=name&use_desc_for_title=1&hierarchical=1') ?>

    </ul></li>{ 
        text-decoration:underline;
    }

Answer 1

您网站上的css和html存在一些问题。

html顶部有一个空的<h6>。我没有看到用途为了这。这也是你的标题被推倒的原因。尝试删除它。
您的固定菜单有一个保证金顶部。这在修复时是不可能的定位元素。删除它。同时设置顶部：0这里强制菜单到位。（也不允许使用4.5px的填充。屏幕上的像素不会减半）
给标题一个50px的填充顶部，与高度相同你的菜单。这使它直接适合manu。

那应该可以解决你的问题。无论如何，在Chrome代码检查器中为我工作。

也许您可以尝试在W3C网站上验证您的css和html，因为它可能存在更多问题。

Answer 2

将div#header条目替换为（已添加padding-top:60px）：

div#header {
    width: 100%;
    margin-bottom: 20px;
    padding-top: 1px;
    /*gradients */
    background-image: -ms-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -moz-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -o-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #006AD4), color-stop(1, #2500A1));
    background-image: -webkit-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: radial-gradient(circle farthest-corner at center, #006AD4 0%, #2500A1 100%);
    /*end gradients*/
    border-bottom: solid 2px #808080;
    padding-top:60px;
}

和您的#qm0条目（已删除margin-top:-4.7em）：

#qm0 {    
    background-image: linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -o-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -moz-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -webkit-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -ms-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    padding-bottom: 4.5px;
    position:fixed;
    border-color:#A2BFE9;
    position:fixed;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #00A3EF;
}

并从<h6></h6>上方的HTML中删除<ul id="qm0" class="qmmc">。

Answer 3

我遇到了同样的问题。将position:fixed应用于元素后，8px的边距以某种方式应用于父元素，因此我将父元素设置为margin:0，并将其解析。（Chrome）

这是示例

<body style="margin:0"><!-- the parent element -->
    <div style="position:fixed:background-color:grey;width:100%">
        Hello World
    </div>
</body>

使用margin:8px

时，浏览器会解释position:fixed

位置：固定;在它下面添加少量空白区域

3 个答案: