# Issues Overlaying HTML Buttons on a P5 Canvas
**URL:** https://discourse.processing.org/t/issues-overlaying-html-buttons-on-a-p5-canvas/21227
**Category:** Coding Questions
**Created:** [May 24, 2020, 3:59am UTC](https://discourse.processing.org/t/issues-overlaying-html-buttons-on-a-p5-canvas/21227 "2020-05-24T03:59:56Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@swan](https://discourse.processing.org/u/swan)
#### Post date: [May 24, 2020, 3:59am UTC](https://discourse.processing.org/t/issues-overlaying-html-buttons-on-a-p5-canvas/21227/1 "2020-05-24T03:59:56Z")
Hi, I am creating a little evolutionary algorithm app as a side project. Anyway, I’m having troubles creating a hamburger button that will reveal a sidebar menu for changing settings and maybe returning to home. I would like the button to be on top of my canvas. For some reason the p5 canvas is displaying over the button. I have assigned the canvas to the main div and set the z-index for that div, but nothing is changing in regards to display order. Any thoughts? I suppose I could create a collection of buttons inside of my p5 script, but that seems a little kludgy if I want custom styles and a number of other things which are easier to do in html.
Alternatively, could someone point me to some menu examples in p5?
Aside: I realize I could just make the app a fixed size on the page and put a control menu elsewhere, but I figured it would be a good time to brush up on my html, css, javascript to make exactly what I’m envisioning. I also like the idea of an auto-scaling full-screen app.
Here you can see my [code](https://github.com/RMichaelSwan/Genetic-Algorithm-Demo) (script.js & index.html) and [webpage](https://rmichaelswan.github.io/Genetic-Algorithm-Demo/). If you bring up the page you’ll see the hamburger menu being covered up in the top left corner and a pause button I added through p5.js
---
### Author:  [@tony](https://discourse.processing.org/u/tony)
#### Post date: [May 24, 2020, 6:08am UTC](https://discourse.processing.org/t/issues-overlaying-html-buttons-on-a-p5-canvas/21227/2 "2020-05-24T06:08:10Z")
Welcome to the forums swan!
I might need to brush up as well. But maybe look into the p5.dom.js library? I don’t know if I have a clear idea of what your going for haha
---
### Author:  [@swan](https://discourse.processing.org/u/swan)
#### Post date: [May 24, 2020, 11:10pm UTC](https://discourse.processing.org/t/issues-overlaying-html-buttons-on-a-p5-canvas/21227/3 "2020-05-24T23:10:00Z")
Thanks! I briefly saw p5.dom.js being used in an example. Didn’t delve into it much, but perhaps I should look closer. I’m just trying to display an html button on top of the canvas but for some reason the canvas takes precedence no matter what.
For example, they have buttons (run, reset, copy) on top of the canvas in this example [here](https://p5js.org/examples/hello-p5-simple-shapes.html), but I’m having trouble understanding how they work.
---
### Author:  [@tony](https://discourse.processing.org/u/tony)
#### Post date: [June 8, 2020, 6:46pm UTC](https://discourse.processing.org/t/issues-overlaying-html-buttons-on-a-p5-canvas/21227/4 "2020-06-08T18:46:40Z")
Were you ever able to figure this out?
---
### Author:  [@swan](https://discourse.processing.org/u/swan)
#### Post date: [June 12, 2020, 1:21pm UTC](https://discourse.processing.org/t/issues-overlaying-html-buttons-on-a-p5-canvas/21227/5 "2020-06-12T13:21:58Z")
I’ve gotten distracted since this post and was sort of hoping someone would come up with a solution 😛 . I’m guessing your suggestion to use p5.dom.js is correct though. I’ll post again once I do it if no one else does.
---
### Author:  [@BSiemens](https://discourse.processing.org/u/BSiemens)
#### Post date: [June 12, 2020, 4:09pm UTC](https://discourse.processing.org/t/issues-overlaying-html-buttons-on-a-p5-canvas/21227/6 "2020-06-12T16:09:35Z")
Try setting the z-index of the button to 10.
---
### Author:  [@swan](https://discourse.processing.org/u/swan)
#### Post date: [June 12, 2020, 9:26pm UTC](https://discourse.processing.org/t/issues-overlaying-html-buttons-on-a-p5-canvas/21227/7 "2020-06-12T21:26:10Z")
That doesn’t change anything. The canvas still covers the button.
---
### Author:  [@BSiemens](https://discourse.processing.org/u/BSiemens)
#### Post date: [June 12, 2020, 10:40pm UTC](https://discourse.processing.org/t/issues-overlaying-html-buttons-on-a-p5-canvas/21227/8 "2020-06-12T22:40:56Z")
[https://abbub.github.io/helpful.html](https://abbub.github.io/helpful.html)
Try position: absolute;
for #menu.
\*I also changed the z-index of .sidebar to 2.
---
### Author:  [@BSiemens](https://discourse.processing.org/u/BSiemens)
#### Post date: [June 13, 2020, 4:48pm UTC](https://discourse.processing.org/t/issues-overlaying-html-buttons-on-a-p5-canvas/21227/10 "2020-06-13T16:48:10Z")
Okay, you’ve either seen it or aren’t interested so I’ll leave it up until tomorrow.
---
### Author:  [@swan](https://discourse.processing.org/u/swan)
#### Post date: [June 14, 2020, 6:06pm UTC](https://discourse.processing.org/t/issues-overlaying-html-buttons-on-a-p5-canvas/21227/11 "2020-06-14T18:06:25Z")
Thank you! That does the trick, just what I was looking for.