Layering 3+ HTML objects - html

Question

How do you layer Multiple layers of HTML objects in CSS? My code is broken
Is there an easier way of doing this?
So in my project there is the main canvas, then an "inventory"-div-table in it with interactive cells each layered with div's and images but I'm trying to get a p-tag to layer over the cells image to represent the quantity of thus item my code is as follows:
html, body {
background: lightslategray;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#pengame {
position: relative;
width: 100%;
height: 100%;
}
#pengame canvas {
position: absolute;
image-rendering: auto;
object-fit: none;
}
#ingamechat{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
#leaderboard{
position: absolute;
display: none;
top: 1.8%;
right: 100px;
background: rgb(50,50,50,0.4);
border-radius: 10px;
color: white;
}
#inventory{
position: absolute;
display: block;
top: 10%;
left: calc(1.3% + 320px);
background: rgb(50,50,50,0.4);
border-radius: 10px;
color: white;
padding: 0px 15px;
width: 300px;
max-width: 400px;
height: 70%;
max-height: 70%;
overflow: scroll;
-webkit-user-select: none;
}
.td{
padding:5px;
position: relative;
max-width: 55px;
max-height: 55px;
}
input[type=text] {
width: 100%;
padding: 4px 5px;
box-sizing: border-box;
color: white;
opacity: 0.5;
background: transparent;
border: none;
}
input:focus {
outline: none;
}
#infobox{
position: absolute;
display: block;
top: 1.8%;
left:1%;
max-width: 300px;
background: rgb(50,50,50,0.4);
padding: 0px 10px;
border-radius: 25px;
color: white;
}
#boption{
height: 35px;
width: 35px;
padding: 5px 4px;
border-radius: 10px;
-webkit-user-select: none;
}
#shopicon{
position: absolute;
display: block;
top: 1.8%;
right: 15px;
background: rgb(50,50,50,0.4);
border-radius: 10px;
}
#shopicon :hover{
position: absolute;
display: block;
top: 1.8%;
right: 0%;
background: rgb(200,200,200,0.4);
border-radius: 10px;
}
#invetoryitem{
--displayc: rgb(50,200,50,0.4);
display: block;
background: rgb(50,50,50,0.4);
height: 45px;
width: 45px;
padding: 5px 4px;
border-radius: 10px;
}
#invetorypic{
height: 45px;
width: 45px;
}
#invetoryitem :hover{
background: rgb(200,200,200,0.4);
border-radius: 10px;
}
#invnumber{
display: block;
position: absolute;
color: black
}
canvas {
background-color: transparent;
}
<div id="pengame">
<div id="inventory">
<h2>Inventory</h2>
<table id="myitems">
<tr>
<td>
<div id="invetoryitem" > <img id="invetorypic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image"/></div> <p id="invnumber">1</p>
</td>
</tr>
</table>
</div>
</div>
This code is a good representation of what my "inventory" looks like

Answer 1

Improving the HTML
I'm going to focus solely on the inventory area, and not the overall layout of the page, which probably warrants its own aide. Here are some important details about the following code:
Consider using a ul instead of a table. You are representing a list of items so the ul makes the most semantic sense here
Use flexbox for the layout of the list and its items
Since you want the inventory stock number on top of the image (lower right), you must first create a relative container in which to absolutely place them. We'll set each li to position: relative
#inventory-items {
display: flex;
list-style: none;
flex-wrap: wrap;
margin: 0;
padding: 0;
width: 300px;
background-color: rgba(0, 0, 0, .2);
}
.inventory-item {
position: relative;
border: 1px solid transparent;
}
.inventory-stock {
position: absolute;
bottom: 5px;
right: 0;
z-index: 1;
background-color: rgba(0, 0, 0, .7);
color: white;
display: inline-block;
padding: 1px 2px;
text-align: center;
font-size: 90%;
}
.invetory-pic {
max-width: 50px;
}
<div id="inventory">
<h2>Inventory</h2>
<ul id="inventory-items">
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">1</span>
</li>
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">5</span>
</li>
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">121</span>
</li>
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">1000</span>
</li>
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">10</span>
</li>
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">5</span>
</li>
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">5</span>
</li>
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">5</span>
</li>
</ul>
</div>
jsFiddle
Working with the existing HTML
To leave your code mostly as it is, and make the additions you want:
convert the ids to classes (duplicate ids are invalid HTML)
Move the inventory number inside the container containing the image
html,
body {
background: lightslategray;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#pengame {
position: relative;
width: 100%;
height: 100%;
}
#pengame canvas {
position: absolute;
image-rendering: auto;
object-fit: none;
}
#ingamechat {
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
#leaderboard {
position: absolute;
display: none;
top: 1.8%;
right: 100px;
background: rgb(50, 50, 50, 0.4);
border-radius: 10px;
color: white;
}
#inventory {
position: absolute;
display: block;
top: 10%;
left: calc(1.3% + 320px);
background: rgb(50, 50, 50, 0.4);
border-radius: 10px;
color: white;
padding: 0px 15px;
width: 300px;
max-width: 400px;
height: 70%;
max-height: 70%;
overflow: scroll;
-webkit-user-select: none;
}
.td {
padding: 5px;
position: relative;
max-width: 55px;
max-height: 55px;
}
input[type=text] {
width: 100%;
padding: 4px 5px;
box-sizing: border-box;
color: white;
opacity: 0.5;
background: transparent;
border: none;
}
input:focus {
outline: none;
}
#infobox {
position: absolute;
display: block;
top: 1.8%;
left: 1%;
max-width: 300px;
background: rgb(50, 50, 50, 0.4);
padding: 0px 10px;
border-radius: 25px;
color: white;
}
#boption {
height: 35px;
width: 35px;
padding: 5px 4px;
border-radius: 10px;
-webkit-user-select: none;
}
#shopicon {
position: absolute;
display: block;
top: 1.8%;
right: 15px;
background: rgb(50, 50, 50, 0.4);
border-radius: 10px;
}
#shopicon :hover {
position: absolute;
display: block;
top: 1.8%;
right: 0%;
background: rgb(200, 200, 200, 0.4);
border-radius: 10px;
}
.invetoryitem {
--displayc: rgb(50, 200, 50, 0.4);
display: block;
background: rgb(50, 50, 50, 0.4);
height: 45px;
width: 45px;
padding: 5px 4px;
border-radius: 10px;
}
.invetorypic {
height: 45px;
width: 45px;
}
.invetoryitem :hover {
background: rgb(200, 200, 200, 0.4);
border-radius: 10px;
}
canvas {
background-color: transparent;
}
.invetoryitem {
position: relative;
}
.invnumber {
position: absolute;
bottom: -12px;
right: 4px;
color: black;
pointer-events: none;
}
<div id="pengame">
<div id="inventory">
<h2>Inventory</h2>
<table id="myitems">
<tr>
<td>
<div class="invetoryitem"> <img class="invetorypic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" />
<p class="invnumber">1</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="invetoryitem"> <img class="invetorypic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" />
<p class="invnumber">21</p>
</div>
</td>
</tr>
</table>
</div>
</div>
jsFiddle