可滚动内容与固定的不可滚动内容重叠

Question

我希望页面的可滚动部分仅在其高度内滚动。但它与位置已设置为“固定”的标题重叠。

这是小提琴：https://jsfiddle.net/3xc9n6jb/

如何使它们不重叠，以便滚动内容滚动而不触及标题？

<div class="main-div">
    <div class="myBox"></div> <!--This red rectangle is the header. The scrollable content should not overlap with this.-->
    <div class="scrollable-content horizontal">
        <ul>
            <li>First Item</li>
            <li>Second Item</li>
            <li>Third Item</li>
            <li>Fourth Item</li>
            <li>Fifth Item</li>
            <li>Sixth Item</li>
            <li>Seventh Item</li>
            <li>Eight Item</li>
            <li>Ninth Item</li>
            <li>Tenth Item</li>
        </ul>  
   </div>
</div>

.myBox {
    width: 500px;
    height: 50px;
    background-color: red;
    position: fixed;
}

ul {
   position: absolute;
   margin-top: 30px;
}

Answer 1

也许你想要这样的东西：

  .myBox {
    width: 500px;
    height: 50px;
    background-color: red;
    position: fixed;
    top:0;

}

ul {
   margin-top: 50px;
}

position:absolute

密钥在ul选择器中不使用margin-top，并将height的值等于mybox的{​​{1}}。