我想知道为什么两个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;
}

这些是我的代码。 我认为这两个div的高度相同，因此'nav_bar'将覆盖'blank'。  但结果是空白＆＃39;会超过＆＃39; nav_bar＆＃39; 我想知道为什么???谢谢!!

Answer 1

正如提到的另一个答案，您在; left:之后忘记了#nav_bar。

position: fixed;属性使两个元素相互重叠，这就是为什么它可能看起来比另一个短。除非您有意让它们重叠，否则请移除position: fixed;，它们将垂直相对设置：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您有任何其他问题，请随时询问。

Answer 2

您在; left之后忘记了#nav_bar。

这是问题，

＆＃13;

＆＃13;

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

}

#blank{
    height: 50px;
}

div {
  border:solid 1px;
}

＆＃13;

    <div id="nav_bar">

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

＆＃13;

＆＃13;

＆＃13;