Layering 3+ HTML objects

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

It's unclear what you're asking. Are you asking for an easier way to create what you've already created? — Andy Hoffman, Mar 02 '19 at 23:30
@Andy Hoffman Thanks, for pointing that out, my code is broken I can't get the number to layer on the image. — Andrew Hansen, Mar 02 '19 at 23:40
Okay, so you want the number centered in the direct center of each inventory item (overlaying the image)? — Andy Hoffman, Mar 02 '19 at 23:42
@AndyHoffman I would like each number at the bottom right of each inventory item, right now the number is generated below the div that contains the image — Andrew Hansen, Mar 02 '19 at 23:44
oops sorry, @Andy Hoffman I would like each number at the bottom right of each inventory item, right now the number is generated below the div that contains the image — Andrew Hansen, Mar 02 '19 at 23:45

Andy Hoffman · Accepted Answer · 2019-03-03T01:34:01.860

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

Is there anyway to layer the number on the bottom right of the image itself? — Andrew Hansen, Mar 03 '19 at 00:43
I will defiantly use this method next time but is there anyway to do this same thing without overhauling my work? — Andrew Hansen, Mar 03 '19 at 01:22
@AndrewHansen I split my answer in two. One way is for the (possible) future improvement; the other way is to change things without overhauling your current work — Andy Hoffman, Mar 03 '19 at 01:36
Thank you! and I found why I couldn't format inside the cells here https://stackoverflow.com/questions/4564638/using-position-relative-absolute-within-a-td I'll fix that all thank you so much for the help — Andrew Hansen, Mar 03 '19 at 01:42

Layering 3+ HTML objects

1 Answers1

Improving the HTML

Working with the existing HTML