How can I make an image go to the top layer in CSS and JS-CodePudding

I want the image on the games button to stay on it when you hover over it, right now it disappears. I am trying not to use any HTML, only JS, and CSS. Also, the image should move with the hover effect. Thanks.

My CSS code is

#web_element {
  
  padding-top: 8%;
  text-align: center;
  font-family: monospace;
  font-color: #8ed4f0;
  font-size: 26px;
  
  position: fixed;
  top: 5%;
  left: 5%;
  width: 20%;
  height: 8%;
  background-color: #8ed4f0;
  border: 2px solid #0f99bb;
  border-radius: 10px;
  z-index: 1000;
  transition: 400ms;
  
  
}
#games_element {
  padding-top: 8%;
  text-align: center;
  font-family: monospace;
  font-color: #8ed4f0;
  font-size: 26px;
  
  position: absolute;
  top: 5%;
  left: 30%;
  width: 20%;
  height: 8%;
  background: url('https://longislandweekly.com/wp-content/uploads/2019/11/Cookie-Monster-cookie-crumbs.jpg') 38% 20%;
  z-index 2000;


  border: 2px solid #0f99bb;
  border-radius: 10px;
  z-index: 1000;
  transition: 400ms;
  
}

#web_element:hover{
  background: #fefefe;
  box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.3);
  transform: translateY(-20px);
}

#games_element:hover{
  background: #fefefe;
  box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.3);
  transform: translateY(-20px);
}

This is the JS Code. It makes the CSS work but it's not that important.

const web_tab = document.createElement('div');
web_tab.id = 'web_element';
web_tab.textContent = 'Web Browser';
document.body.append(web_tab);

const games_tab = document.createElement('div');
games_tab.id = 'games_element';
games_tab.textContent = 'Games';
document.body.append(games_tab);

CodePudding user response：

Might you also share the html snippet to it. its very hard to recreate without any context.

CodePudding user response：

In the CSS on the style for #games_element, your overrride your "z-index: 2000; " 3 lines later with "z-index: 1000;" letting it have the same z-index as #web_element