Html 固定顶栏和内容分区

我对HTML和CSS是新手，有一些初学者的问题

我想在顶部有一个固定的导航条（这是固定的），这样即使用户滚动页面，它也会粘在顶部。 下面是内容页

我希望页面的操作方式是，当用户滚动页面时，内容页面应该位于导航栏下

在我的例子中，导航栏的标题是固定的，但是当滚动时，content div会覆盖导航栏

我的代码如下

<div id="Container"> <!--Container Start-->
        <div id="TopBar"><!--TopBar Start-->
            <div class="fixedwidth"> <!-- Fixedwidth Start-->
                <div id="logodiv">   <!-- Logodiv Start-->
                    <img src="images/mascot.jpg"/>
                </div><!-- Logodiv End-->
                <div id="signInDiv">
                    <p><img src="images/orb.png"/>Sign In/Up</p>
                </div>
            </div> <!-- Fixedwidth End-->

        </div><!--TopBar End-->

        <div class="break"></div>

        <div id="mainContentDiv"> <!--Main Content Start-->
            <div class="fixedwidth">
                <div id="Content">

                </div>
            </div>
        </div> <!--Main Content End-->
    </div><!--Container End-->

我知道它有一个简单的解决方案，但就是想不出来。

这个“break”元素似乎应该删除。寻找“clearfix”，这是定义应用于第一个浮动元素（顶栏）的类的标准方法。然后还可以删除顶栏上的“高度”

一种可能更简单的方法是为顶栏设置一个已知的高度（比如50px），并为mainContentDiv的边距顶部设置相同的值。文本不会在下面（如您所要求的），但视觉效果应该是相同的，因为您的顶栏是不透明的

---

还有一种可能是在容器上使用“display:flexbox”，并在mainContentDiv上设置“flex:1”属性，以便它占据除顶栏所需高度之外的整个高度。在这种情况下，删除TopBar的硬编码高度属性，添加我前面提到的clearfix类，以便TopBar在其元素处的高度相同。

去研究

z-index

属性。谢谢！=）这解决了我的问题^^

body{
        margin:0;
    }
    #TopBar{
        background-color:#FFFFFF;
        width:100%;
        height:100px;
        color:#174269;
        position:fixed;

        font-weight:bold;
        font-size:1.2em;
        border-bottom:1px ridge black;
    }

    .fixedwidth{

        width:1050px;
        margin:0 auto;

    }

    #logodiv {
        float:left;
        padding-bottom:5px;

    }
    #logodiv img{
        width:188px;
        height:100px;

    }
    #signInDiv{
        float:right


    }
    #signInDiv img{
        position:relative;
        top:6px;

    }
    #signInDiv p{
        position:relative;
        top:20px;

    }
    .break{
        clear:both;
    }

    #mainContentDiv{

        position:relative;
        top:100px;
        width:100%;
        height:1000px;
        background-color: #0C7ECC;
    }