Background img multiple classes. alternative z-index

Question

I want to set a z-index to a background img.

I want the .player background to be always displayed, even when in the same box I have another class with another background.

If you click the right button you'll see that at the the .player goes to the blue box another class will be added. The .player background must be always displayed.

Why z-index is not working? is there any alternative?

Thank you

  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>

Thank you very much guys.

no need to repeat the same question (https://stackoverflow.com/questions/55244018/background-img-z-index-not-working-alternatives) if the duplicates question aren't what you need you can still edit the question to show why — Temani Afif, Mar 20 '19 at 09:17

score 2 · Accepted Answer · answered Mar 20 '19 at 08:03

The problem is the class order in the css file. More info can be found here

Change:

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

To:

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

Demo

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>

Background img multiple classes. alternative z-index

1 Answers1