html - 位置：固定; その下に少量の空白スペースを追加します

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;
    }

score 3 · Accepted Answer

あなたのサイトのcssとhtmlにはいくつか問題があります。

<h6>HTMLの上部に空があります。私はこれの使用法を見ていません。また、ヘッダーが押し下げられる理由でもあります。削除してみてください。
固定メニューにはマージントップがあります。これは、固定位置の要素では不可能です。これを削除します。また、ここでtop：0を設定して、メニューを強制的に配置します。（また、4.5pxのパディングは許可されていません。画面上でピクセルを半分にするようなことはありません）
メニューの高さと同じ50pxのパディングトップをヘッダーに付けます。これにより、マヌーの真下にフィットします。

それはあなたの問題を解決するはずです。とにかくChromeコードインスペクターで働いてくれました。

おそらく、W3Cサイトでcssとhtmlの検証を試みることができます。これには、さらに問題がある可能性があるためです。

score 1 · Accepted Answer

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">。

score 1 · Accepted Answer

私も同じ問題を抱えていました。要素に適用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

html - 位置：固定; その下に少量の空白スペースを追加します

3 に答える 3

Related

Reference