背景img多个类。替代Z索引

Question

我想将z-index设置为背景img。

我希望始终显示.player背景，即使在同一个盒子中我有另一个具有其他背景的课程。

如果单击右键，您会看到.player转到蓝色框时，将添加另一个类。 .player背景必须始终显示。

为什么z-index不起作用？还有其他选择吗？

谢谢

  let moveCounter = 0;
  let playerOne = {
    currentWeapon: "w1" 
    }

  var grid = document.getElementById("grid-box");


  for (var i = 0; i <= 8; i++) {
    var square = document.createElement("div");
    square.className = 'square';
    square.id = 'square' + i;
    grid.appendChild(square);
  }


  $("#square" + 0).addClass("player")
  $("#square" + 3).addClass("w3")

  function getWeapon(ele) {

    let classList = $(ele).attr("class").split(' ');

    for (let i = 0; i < classList.length; i += 1) {

      if (classList[i][0] === "w") { 

        $(ele).addClass(playerOne.currentWeapon) 
        playerOne.currentWeapon = classList[i]; 

        $(ele).removeClass(playerOne.currentWeapon)
        return classList[i]
      }
    }

  }

  $('#right-button').on('click', function() {

    $("#square" + moveCounter).removeClass("player")
    moveCounter += 1;
    $("#square" + moveCounter).addClass("player")


    getWeapon("#square" + moveCounter);

  });

  #grid-box {
    width: 420px;
    height: 220px;
  }
  #grid-box>div.square {
    font-size: 1rem;
    vertical-align: top;
    display: inline-block;
    width: 10%;
    height: 10%;
    box-sizing: border-box;
    border: 1px solid #000;
  }

  .player {
    background: url(http://placekitten.com/200/300) no-repeat 0 0;
    z-index: 1;
  }

  .w1 {
    background: url(https://preview.ibb.co/ntRarR/watermark3.png) no-repeat center center;
    z-index: 0;
  }

  .w3 {
    background-color: blue;
  }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <div id="grid-box"></div>

  <button class="d-pad-button" id="right-button">Right button</button>

非常感谢你们。

Answer 1

问题是class文件中的css顺序。可以找到更多信息here

更改：

.player {
  background: url(http://placekitten.com/200/300) no-repeat 0 0;
  z-index: 1;
}

.w1 {
  background: url(https://preview.ibb.co/ntRarR/watermark3.png) no-repeat center center;
  z-index: 0;
}

收件人：

.w1 {
  background: url(https://preview.ibb.co/ntRarR/watermark3.png) no-repeat center center;
  z-index: 0;
}

.player {
  background: url(http://placekitten.com/200/300) no-repeat 0 0;
  z-index: 1;
}

演示

let moveCounter = 0;
  let playerOne = {
    currentWeapon: "w1" 
    }

  var grid = document.getElementById("grid-box");


  for (var i = 0; i <= 8; i++) {
    var square = document.createElement("div");
    square.className = 'square';
    square.id = 'square' + i;
    grid.appendChild(square);
  }


  $("#square" + 0).addClass("player")
  $("#square" + 3).addClass("w3")

  function getWeapon(ele) {

    let classList = $(ele).attr("class").split(' ');

    for (let i = 0; i < classList.length; i += 1) {

      if (classList[i][0] === "w") { 

        $(ele).addClass(playerOne.currentWeapon) 
        playerOne.currentWeapon = classList[i]; 

        $(ele).removeClass(playerOne.currentWeapon)
        return classList[i]
      }
    }

  }

  $('#right-button').on('click', function() {

    $("#square" + moveCounter).removeClass("player")
    moveCounter += 1;
    $("#square" + moveCounter).addClass("player")


    getWeapon("#square" + moveCounter);

  });

#grid-box {
    width: 420px;
    height: 220px;
  }
  #grid-box>div.square {
    font-size: 1rem;
    vertical-align: top;
    display: inline-block;
    width: 10%;
    height: 10%;
    box-sizing: border-box;
    border: 1px solid #000;
  }


  .w1 {
    background: url(https://preview.ibb.co/ntRarR/watermark3.png) no-repeat center center;
    z-index: 0;
  }

  .player {
    background: url(http://placekitten.com/200/300) no-repeat 0 0;
    z-index: 1;
  }


  .w3 {
    background-color: blue;
  }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <div id="grid-box"></div>

  <button class="d-pad-button" id="right-button">Right button</button>