position relative перекрывает нижестоящте элементы

#container{
    position: relative;
}
#container canvas{
    position: absolute; left: 0; top: 0;
}

<div id="container">
    <canvas id="cnvBg" width="1200" height="700"></canvas>
    <canvas id="cnvTop" width="1200" height="700"></canvas>
    
</div>

<div>
    content content content 
</div>

почему нижестоящие блоки оказываются под #container ? как правильно использовать relative? это нужно чтобы канвасы были слоями друг над другом