Jeśli chcesz położyć je na sobie, to łatwiej będzie, jeśli wrzucisz je do jednego kontenera, np. diva o id "main".
Akurat odradzam stylowanie przez JS, lepiej przez JS dodać klasę do poszczególnych elementów w taki sposób:
// Gdy stworzysz zmienne div i canvas
div.classList.add('div-under-canvas')
canvas.classList.add('canvas-on-my-website')
Więcej o klasach dodawanych przez JS poczytasz tu: https://developer.mozilla.org/pl/docs/Web/API/Element/classList
A na koniec wrzucisz je do jednego kontenera pozycjonując canvas absolutnie, jak proponowali moi poprzednicy :)
W css możesz je sobie wystylować tak samo, jak chciałeś to zrobić w JS, tylko po klasach:
.canvas-on-my-website,
.div-under-canvas {
width: 500px;
height: 500px;
}
.canvas-on-my-website {
border: 1px solid;
}
.div-under-canvas {
background-color: red;
opacity: .5;
}
Nie jestem w 100% pewien, że ten kod działa, bo piszę go z głowy (bez sprawdzenia). Jak coś, to jeszcze go poprawię, gdyby gdzieś był błąd :)
(Nie napisałem jak pozycjonować absolutnie - to zostawiam Tobie ;) )
Zaznaczam, że możesz uzyskać taki sam efekt nawet jeśli wrzucisz te elementy do osobnych kontenerów, ale w przyszłości, gdy będziesz rozbudowywać stronę może to spowodować problemy (może się to rozjechać) i generalnie trudniej będzie Ci coś tam zrobić :)
Ale znów, jak napisał @mitelak to zależy od tego co chcesz osiągnąć.