我正在使用 HTML5 和 CSS 网格创建一个基于 sprite 的游戏。 我为不同的元素(背景和前景)设置了不同的 z-index
期望: 我想象多个元素可以占据相同的网格空间,但显然,它们四处移动,忽略了 z-index。
结果:改变前景元素的网格区域会改变剩余元素的顺序而不是重叠它们
CSS:
#container {
position: relative;
height: 500px;
width: 500px;
display: grid;
grid-gap: 1px;
grid-template-columns: repeat(5, 20%);
grid-template-rows: repeat(5, 20%);
}
.item {
z-index: 0;
display: flex;
justify-content: center;
align-items: center;
background-size: 1600%;
image-rendering: pixelated;
}
@keyframes walk {
100% { background-position: -462px; }
}
#sprite {
z-index: 2;
background-color: transparent;
height: 100px;
width: 100px;
background: url(./../assets/thief.png) 0px 0px;
background-size: 1200%;
image-rendering: pixelated;
animation: walk 0.5s steps(5) infinite;
}
最佳答案
下面使用绝对位置的初始快速和肮脏的方式 - 但刚刚仔细研究了这一点,似乎您可以通过使用自定义列和行名称以及 grid-template-areas
和使用 grid-area
定位它们。
.container {
height: 500px;
width: 500px;
position: relative;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(5, 20%);
grid-template-rows: repeat(5, 20%);
grid-template-areas: "r1c1 r1c2 r1c3 r1c4 r1c5"
"r2c1 r2c2 r2c3 r2c4 r2c5"
"r3c1 r3c2 r3c3 r3c4 r3c5"
"r4c1 r4c2 r4c3 r4c4 r4c5"
"r5c1 r5c2 r5c3 r5c4 r5c5";
}
.item {
background: #eee;
padding: .25em;
z-index: 0;
}
#sprite {
grid-area: r2c3;
background: #ccc;
z-index: 5;
opacity: .5;
}
/* positioning the overlapped cell so the grid flow is intact */
/* you'll need to specify all the other cell classes also! */
.r2c3 {
grid-area: r2c3;
}
<div class="container">
<div id="sprite">sprite</div>
<div class="item r1c1">1</div>
<div class="item r1c2">2</div>
<div class="item r1c3">3</div>
<div class="item r1c4">4</div>
<div class="item r1c5">5</div>
<div class="item r2c1">6</div>
<div class="item r2c2">7</div>
<div class="item r2c3">8</div>
<div class="item r2c4">9</div>
<div class="item r2c5">10</div>
<div class="item r3c1">11</div>
<div class="item r3c2">12</div>
<div class="item r3c3">13</div>
<div class="item r3c4">14</div>
<div class="item r3c5">15</div>
<div class="item r4c1">16</div>
<div class="item r4c2">17</div>
<div class="item r4c3">18</div>
<div class="item r4c4">19</div>
<div class="item r4c5">20</div>
<div class="item r5c1">21</div>
<div class="item r5c2">22</div>
<div class="item r5c3">23</div>
<div class="item r5c4">24</div>
<div class="item r5c5">25</div>
</div>
快速而肮脏的选项 - 对于任何覆盖元素(如玩家 Sprite ),您可以绝对定位它们以将它们从网格布局中删除。例如:
#sprite {
position: absolute;
top: 100px;
left: 100px;
}
关于html - CSS 网格移动元素而不是重叠 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56518460/