分层3+ HTML对象

Question

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

有没有更简单的方法？

因此，在我的项目中，有一个主画布，然后是一个“清单” -div表，其中包含交互式单元格，每个单元格都与div和图像分层，但是我试图获得一个p标签，以便在单元格图像上分层代表这样的物品的数量，我的代码如下：

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