Threejs div rendering under all other content?

I have a working sample of a simple site- navbar, banner div with threejs rendering to it, and some footer/bottom text. The problem is that my bottom text renders above the threejs div and I don’t know why. Any advice on how to fix this?

Here is my sample code:

How about using CSS Grid to build your layout like in this live demo: Edit fiddle - JSFiddle - Code Playground

I’ve only applied parts of your HTML so you get a basic idea of the approach.

Thank you so much! This is very helpful!