# Trouble with z-index and body

**URL:** <https://discourse.processing.org/t/trouble-with-z-index-and-body/10486>\
**Category:** Coding Questions\
**Created:** [April 20, 2019, 12:54pm UTC](https://discourse.processing.org/t/trouble-with-z-index-and-body/10486 "2019-04-20T12:54:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Indieminor](https://avatars.discourse-cdn.com/v4/letter/i/8797f3/32.png) [@Indieminor](https://discourse.processing.org/u/Indieminor)\
**Post date:** [April 20, 2019, 12:54pm UTC](https://discourse.processing.org/t/trouble-with-z-index-and-body/10486/1 "2019-04-20T12:54:40Z")

</div>

Hey all, I am fairly new to programming (3.5 months in) and I came across p5.js and decided to implement it into a little project of mine.

My main idea is to have random circles generate on keypress or click with random colors and sizes. I decided to test to see if p5.js was working on my site, which it is…but…for some reason, my little drawing stays behind the body element of my site. It shows top and bottom, but not on the meat of my site. Right now it’s just a simple click event to draw a line with the mouse.

could anyone help please? I’ll put all of my code below

```auto
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="Resources\css\style.css">
  <title>Pressn.Listen</title>
</head>
<body>
  <h1>Pressn.Listen</h1>

    <section>
    <ul id="image-list" style="list-style-type: none">
      <li><input type="image" class="images" src="https://dl.dropboxusercontent.com/s/v4mfc9ql89q60hn/DSCF8693.jpg?dl=0" alt="pink-flowers"></input></li>
      <li><input type="image" class="images" src="https://dl.dropboxusercontent.com/s/ywri0sg4i16nbc2/DSCF7307.jpg?dl=0" alt="overpass-sky"></input></li>
      <li><input type="image" class="images" src="https://dl.dropboxusercontent.com/s/xpslama3reuniwz/DSCF6953.jpg?dl=0" alt="home-doorway"></input></li>
      <li><input type="image" class="images" src="https://dl.dropboxusercontent.com/s/73xltoeeoyq78y7/20181029-DSCF6165.jpg?dl=0" alt="garage"></input></li>
    </ul>
    </section>
    <footer>
      <nav>
        <ul id="nav-bar" style="list-style-type: none">
          <li>
            <a class="links" target="_blank" href="https://mobile.twitter.com/eddiepearson">Twitter</a>
          </li>
             <li>
            <a class="links" target="_blank" href="https://github.com/eddiepearson">Github</a>
          </li>
        </ul>
      </nav>
     </footer>

     <audio id="song1" src="Resources\sounds\loopy loop 1.mp3"></audio>
     <audio id="song2" src="Resources\sounds\Automation city master.mp3"></audio>
</body>
<script type="text/javascript" src="Resources\js\app.js"></script>
<script src="Resources\js\p5.js"></script>
<script language="javascript" type="text/javascript" src="Resources\js\p5.dom.js"></script>
</html>

```

```auto
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

* { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto Mono', monospace;
}

body, html {
  background-color: #f2f2f2;
}

header {
  text-align: right;
  margin: 3rem;
}

h1 {
  margin: 5rem 0 5rem 7rem;
  background: linear-gradient(90deg, rgba(0,25,36,1) 0%, rgb(118, 181, 211) 0%, rgba(255,206,249,1) 36%);
  -webkit-background-clip: text;
   background-clip: text;
  -webkit-text-fill-color: transparent;
}

#image-list {
  margin: 8rem auto 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
  max-width: 1000px;
}

.images {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: none;
}

.ease {
  transition: transform 2.5s ease-out;
  transform: translateY(4px);
  transform: scale(2);
}

input:hover {
    -webkit-filter: brightness(70%);
    filter: brightness(70%);
    transition: 0 3s ease;
}

#nav-bar {
  display: flex;
  justify-content: center;
  margin: 5rem;
}

#nav-bar li {
  margin: 2rem;
}

.links {
  text-decoration: none;
  padding: 1rem;
  color: black;
  box-shadow: 5px 5px 0 0 rgba(19, 19, 19, 0.15);
  border-radius: 10px;
  transition: 0s;
}

.links:hover {
	color: white;
	background: linear-gradient(90deg, rgba(0,25,36,1) 0%, rgba(54,123,156,1) 0%, rgba(198,153,192,1) 70%);
  transition:.5s;
}

.links:after {
  transform: translateY(4px);
}

@media screen and (max-width: 600px) {
  #image-list {
    margin: 3rem;
  }
  
  h1 {
    margin: 5rem 3rem 10rem 3rem;
  }
}

@media screen and (max-width: 1000px) {
  #image-list {
    margin: 3rem;
  }
}

```

```auto
//select images
let animation = document.querySelector('.ease');
let img1 = document.querySelector('li:nth-child(1)');
let img2 = document.querySelector('li:nth-child(2)');
let song1 = document.querySelector('#song1');
let song2 = document.querySelector('#song2');

//play pause and also animation function
img1.addEventListener('click', function() {
    if(song1.paused) {
        song1.play();
        this.classList.toggle('ease');
    } else {
        song1.pause();
        this.classList.toggle('ease');
    }
});

img2.addEventListener('click', function() {
    if(song2.paused) {
        song2.play();
        this.classList.toggle('ease');
    } else {
        song2.pause();
        this.classList.toggle('ease');
    }
});

//p5.js
let canvas;

function windowResized() {
    resizeCanvas(windowWidth, windowHeight)
  }

function setup() {
    canvas = createCanvas(windowWidth, windowHeight);
    canvas.position(0, 0);
    canvas.style('z-index', '-1');
    background(242, 242, 242);
  }

  function keyPressed() {
      clear();
  }

  function draw() {
    if (mouseIsPressed) {
        line(pmouseX, pmouseY, mouseX, mouseY);
    }
  }

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [April 20, 2019, 6:29pm UTC](https://discourse.processing.org/t/trouble-with-z-index-and-body/10486/2 "2019-04-20T18:29:14Z")

</div>

I believe you z-index should be positive. Check [this](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)

Kf

---

<div class="post-metadata">

**Author:** ![Indieminor](https://avatars.discourse-cdn.com/v4/letter/i/8797f3/32.png) [@Indieminor](https://discourse.processing.org/u/Indieminor)\
**Post date:** [April 21, 2019, 1:55pm UTC](https://discourse.processing.org/t/trouble-with-z-index-and-body/10486/3 "2019-04-21T13:55:03Z")

</div>

when I make it positive, the p5.js sketch takes over the site and you can’t see my site. Unless the user presses spacebar, which is kind of annoying. I’ve seen someones site that has a similar idea [https://www.alispit.tel/](https://www.alispit.tel/)

which you click, random shapes show up behind her content. On my site, it’s like the sketch won’t register behind my content as if it’s blocking it. It only shows outside of my body element, on the very top and bottom.

---

<div class="post-metadata">

**Author:** ![Indieminor](https://avatars.discourse-cdn.com/v4/letter/i/8797f3/32.png) [@Indieminor](https://discourse.processing.org/u/Indieminor)\
**Post date:** [April 21, 2019, 2:00pm UTC](https://discourse.processing.org/t/trouble-with-z-index-and-body/10486/4 "2019-04-21T14:00:36Z")

</div>

figured it out. I had to make the z-index of my body element 2 and the z-index of the sketch, -1.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [April 21, 2019, 3:56pm UTC](https://discourse.processing.org/t/trouble-with-z-index-and-body/10486/5 "2019-04-21T15:56:17Z")

</div>

Perfect. Thxs for sharing your solution.

Kf

---

<div class="post-metadata">

**Author:** ![Indieminor](https://avatars.discourse-cdn.com/v4/letter/i/8797f3/32.png) [@Indieminor](https://discourse.processing.org/u/Indieminor)\
**Post date:** [April 23, 2019, 1:20pm UTC](https://discourse.processing.org/t/trouble-with-z-index-and-body/10486/6 "2019-04-23T13:20:48Z")

</div>

no problem. Thank you for trying to help.