scrollbare Inhalte überlappen sich auf festen nicht scrollbaren Inhalt

Question

Ich möchte den scrollbaren Teil der Seite nur innerhalb seiner Höhe scrollen. Es überschneidet sich jedoch mit dem Header, dessen Position auf 'fixed' gesetzt wurde. Hier

ist die Geige: https://jsfiddle.net/3xc9n6jb/

Wie kann ich sie nicht überlappen, so dass der rollbaren Inhalt scrollt ohne den Header zu berühren?

<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

vielleicht möchten Sie etwas wie folgt aus:

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

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

} 

ul { 
    margin-top: 50px; 
} 

der Schlüssel position:absolute in ul Wähler nicht verwenden, und den Mehrwert von margin-top zu height von mybox entspricht.