Холст не прокручивается со страницы

Question

У меня есть холст в моем приложении, который не прокручивается, как я ожидал. Я пытаюсь сделать список спортивных турниров, поэтому я хотел бы иметь структуру DOM, а затем накладывать холст на нее, чтобы связать различные игры. Отлично работает, пока я не прокручу, и полотно действует как position: fixed. Может быть, это какая-то гибкая ошибка, или я делаю что-то глупое. Я бы ожидал, что диагональная линия прокрутит текст. Что вызывает такое поведение?

const c = document.getElementById('canvas'); 
 
const ctx = c.getContext('2d'); 
 
ctx.moveTo(0, 0); 
 
ctx.lineTo(200, 200); 
 
ctx.stroke();

.app-container { 
 
    display: flex; 
 
    height: 100%; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
.app-nav-bar { 
 
    flex: 0 0 230px; 
 
    border: 1px solid #aaa; 
 
    background: #eef1f7 no-repeat 0 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 200px; 
 
} 
 

 
.header-and-body { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-flow: column; 
 
    margin-left: 200px; 
 
} 
 

 
.app-header { 
 
    flex: 0 0 45px; 
 
    border: 1px solid #aaa; 
 
} 
 

 
.main-view-container { 
 
    display: flex; 
 
    height: 100%; 
 
    overflow-y: auto; 
 
} 
 

 
.tournament-container { 
 
    margin-left: 20px; 
 
} 
 

 
canvas { 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 

 
.contents { 
 
    height: 1000px; 
 
    width: 1000px; 
 
}

<div class="app-container"> 
 
    <div class="app-nav-bar">Navs</div> 
 
    <div class="header-and-body"> 
 
     <div class="app-header">Header</div> 
 
     <div class="main-view-container"> 
 
     <div class="tournament-container"> 
 
      <canvas id="canvas" width="1000" height="1000"></canvas> 
 
      <div class="contents"> 
 
      <h4>Here are my contents</h4> 
 
      <h4>Some other stuff</h4> 
 
      <h4>This should scroll</h4> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

Добавить position: relative; к классу "главный ракурс-контейнер".