\
**Category:** Coding Questions\
**Created:** [October 19, 2019, 12:43am UTC](https://discourse.processing.org/t/how-does-the-canvas-mix-with-html/14787 "2019-10-19T00:43:47Z")\
**Posts on this page:** 5\
**Page:** 1
**Author:**  [@tylerowens](https://discourse.processing.org/u/tylerowens)\
**Post date:** [October 19, 2019, 12:43am UTC](https://discourse.processing.org/t/how-does-the-canvas-mix-with-html/14787/1 "2019-10-19T00:43:47Z")
Hello all,
I am planning on starting my first p5js project, this is my first time in p5js but i have practiced in processing previously.
My question is how to make the html elements go ontop of the canvas. what i mean is
how can does it work so i can make “tyler owens” be on top of the canvas rather than being stuck above it.
Sorry this question is so simple, just not understand this basic first step!
Thank you
---
**Author:**  [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 19, 2019, 1:08am UTC](https://discourse.processing.org/t/how-does-the-canvas-mix-with-html/14787/2 "2019-10-19T01:08:24Z")
ON TOP is same as ABOVE? or OVER?
anyhow the positioning DOM thing is tricky, see if it helps:
[https://editor.p5js.org/kll/sketches/h53BeOPNU](https://editor.p5js.org/kll/sketches/h53BeOPNU)
that was a test of a simple HTML web page layout
WITH a p5.js canvas area
---
**Author:**  [@tylerowens](https://discourse.processing.org/u/tylerowens)\
**Post date:** [October 19, 2019, 1:16am UTC](https://discourse.processing.org/t/how-does-the-canvas-mix-with-html/14787/3 "2019-10-19T01:16:46Z")
for example make it look like this,
---
**Author:**  [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 19, 2019, 1:23am UTC](https://discourse.processing.org/t/how-does-the-canvas-mix-with-html/14787/4 "2019-10-19T01:23:05Z")
so the idea is to add DOM elements FROM SCRIPT
and then use the
[https://p5js.org/reference/#/p5.Element/position](https://p5js.org/reference/#/p5.Element/position)
on it.
* * *
but you possibly tried the other way,
start from HTML
and then it gets more tricky,
* * *
anyhow to play please also link to your test project here at
[https://editor.p5js.org](https://editor.p5js.org)
or you would have to post / paste
index.html AND sketch.js
file again and again
and still not many people would like to follow you and play / help
---
**Author:**  [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [October 19, 2019, 7:44am UTC](https://discourse.processing.org/t/how-does-the-canvas-mix-with-html/14787/5 "2019-10-19T07:44:20Z")
If the text ‘tyler owens’ isn’t part of your sketch, you could play around with CSS functions such as [positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position) and [z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index). Provide the `div` tags in your HTML document with class names or id’s and assign CSS rules to it using your stylesheet.