同じ高さだが異なる同じ2つのdivの理由を知りたいのですが

Question

<div id="nav_bar"> 

    </div> 
    <div id="blank"></div> 

    #nav_bar{ 
    position: fixed; 
    top: 0px; 
    left: 0px 
    height: 50px; 
    width: 100%; 
    z-index: 2; 

} 

#blank{ 
    height: 50px; 
} 

これは私のコードです。 'nav_bar'が'blank'をカバーするように、これらの2つのdivが同じ高さになると思います。 ですが、結果は「空白」は「nav_bar」より長くなります 私は理由を知りたいですか？ありがとうございました！

Answer 1

leftの後に;を忘れた場合は、#nav_barになります。ここで

あなたは#nav_barでleft:後;を忘れてしまった、言及された他の答えとして

#nav_bar{ 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 50px; 
 
    width: 100%; 
 
    z-index: 2; 
 

 
} 
 

 
#blank{ 
 
    height: 50px; 
 
} 
 

 
div { 
 
    border:solid 1px; 
 
}

<div id="nav_bar"> 
 

 
    </div> 
 
    <div id="blank"></div>

Answer 2

、問題です。

プロパティposition: fixed;は、2つの要素が互いに重なり合うようにします。そのため、1つの要素が他の要素よりも短いように見えることがあります。あなたが意図的にそれらが重なるようにしたい場合を除き、position: fixed;を削除して、彼らのような垂直方向に設定されます：

#nav_bar { 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 50px; 
 
    width: 100%; 
 
    z-index: 2; 
 
    background: red; 
 
} 
 

 
#blank { 
 
    height: 50px; 
 
    background: blue; 
 
}

<div id="nav_bar"></div> 
 
<div id="blank"></div>

は、あなたがそれ以上の質問がある場合はお気軽にお尋ねください。