CSS сетка перемещает элементы вместо перекрывающихся z-index - PullRequest
Новая
       26

CSS сетка перемещает элементы вместо перекрывающихся z-index

1 голос
/ 10 июня 2019

Я создаю игру на основе спрайтов, используя HTML5 и CSS сетку.Я установил разные z-индексы для разных элементов (фон и передний план)

Ожидание: я представлял, что несколько элементов могут занимать одно и то же пространство сетки, но, очевидно, они перемещаются, игнорируя z-индекс.

Результат: изменение области сетки элемента переднего плана смещает порядок оставшихся элементов вместо их перекрытия

Changing the foreground element's grid-area shifts the order of remaining items instead of overlapping them

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;
}

1 Ответ

0 голосов
/ 20 июня 2019

Первоначальный быстрый и грязный путь ниже с использованием абсолютной позиции - но, только взглянув на это больше, кажется, что вы можете добиться наложения ячеек сетки, используя собственные имена столбцов и строк с 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 {
    position: absolute;
    top: 100px;
    left: 100px;
}
...