【发布时间】：2019-07-24 15:05:06
【问题描述】：
如何在 CSS 中对多层 HTML 对象进行分层？我的代码坏了
有没有更简单的方法？
所以在我的项目中，有一个主画布，然后是一个“库存”-div-table，其中包含交互式单元格，每个单元格都与 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>这段代码很好地代表了我的“库存”的样子
【问题讨论】：
-
不清楚你在问什么。您是否在寻求一种更简单的方法来创建您已经创建的内容？
-
@Andy Hoffman 感谢您指出这一点，我的代码已损坏，我无法将数字叠加到图像上。
-
好的，所以您希望数字位于每个库存项目的直接中心（覆盖图像）？
-
@AndyHoffman 我想要每个库存项目右下角的每个数字，现在该数字生成在包含图像的 div 下方
-
哎呀抱歉，@Andy Hoffman 我想要每个库存项目右下角的每个数字，现在该数字生成在包含图像的 div 下方
标签： html css css-position