html - 分层 3+ HTML 对象

Question

如何在 CSS 中分层多层 HTML 对象？我的代码坏了

有更简单的方法吗？

所以在我的元素中有一个主 Canvas ，然后是一个“库存”-div 表，其中包含交互式单元格，每个单元格都与 div 和图像分层，但我试图让 p-tag 在单元格图像上分层为了表示该元素的数量，我的代码如下:

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>

此代码很好地表示了我的“库存”的样子

Answer 1

改进 HTML

我将只关注库存区域，而不是页面的整体布局，这可能需要自己的帮助。以下是有关以下代码的一些重要细节:

• 考虑使用 ul 而不是 table。您代表的是元素列表，因此 ul 在这里最符合语义
• 使用 flexbox 布局列表及其元素
• 由于您希望将库存编号显示在图像的顶部(右下角)，因此您必须首先创建一个相对容器以将它们绝对放置在其中。我们将每个 li 设置为 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

使用现有的 HTML

让您的代码大部分保持原样，并进行您想要的添加:

• 将 id 转换为 class(重复的 id 是无效的 HTML)
• 移动包含图像的容器内的库存编号

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