CODEWITHSUNDEEP
javascriptcss
RandomDeveloper
RandomDeveloper

Reputation: 873

Various images on top of various images with CSS

My final goal with this code is to build a 'Whack - a - Mole" game.

I want my mole to be positioned on top of the dirt.

I have 6 moles and 6 dirt images all added with JS and I want each of the moles to be positioned on top of each dirt image.

See my code here:

HTML

    const gameCont = document.getElementById('game-container')
    const points = document.getElementById('points');
    let all = document.getElementsByTagName("img");
    
    for (let i = 0; i < 6; i++) {
        var img = document.createElement('img');
        img.src = '/images/dirt.png'
        img.classList.add("dirt-" + [i])
        gameCont.appendChild(img)
          
    }
        
    for (let i = 0; i < 6; i++) {
        var mole = document.createElement('img');
        mole.src = '/images/mole.png'
        mole.classList.add("mole-" + [i])
        gameCont.appendChild(mole)
    }
        body{
        background-color:#FFC000;
        }
        h1{
            display:flex;
            justify-content:center;
            align-items:center;
            font-size:60px;
        }
        #game-container{
          
        }
        
        .dirt-0,.dirt-1,.dirt-2, .dirt-3,.dirt-4,.dirt-5 {
            height:100px;
            width:160px;
        }
    
        .mole-0,.mole-1,.mole-2, .mole-3,.mole-4,.mole-5{
            z-index:3;
            width:100px;
            height:100px;
        } 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Whack - A - Mole!</title>
    </head>
    <body>
    <h1>Whack - A - Mole!</h1>
    <h1 id="points"></h1>
    <div id="game-container">
    
    </div>
    
    <script src="script.js"></script>
      
    </body>
    </html>

What's the best way to go about it?

Upvotes: 0

Views: 66

Answers (2)

Tom&#225;š Kretek
Tom&#225;š Kretek

Reputation: 477

To place moles above dirts you need to wrap them to divs which have position:relative and then add position: absolute to moles. With top: 0 you move it at the top of the dirts and left:0, right:0 and margin:0 auto will center it.

This should work too:

CSS

<style>

body{
  background-color:#FFC000;
}
h1{
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:60px;
}

.dirt-0,.dirt-1,.dirt-2, .dirt-3,.dirt-4,.dirt-5 {
  height:100px;
  width:160px;
}

.mole-0,.mole-1,.mole-2, .mole-3,.mole-4,.mole-5{
  z-index:3;
  width:100px;
  height:100px;
  position: absolute;
  top: 0;
  left:0;
  right:0;
  margin: 0 auto;
}

.dirtContainer{
  width: fit-content;
  width: -moz-fit-content;
  height: fit-content;
  height: -moz-fit-content;
  position:relative;
}

#imagesDiv{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

</style>

HTML

<h1>Whack - A - Mole!</h1>
  <h1 id="points"></h1>
  <div id="game-container">
    <div id="imagesDiv"></div>
  </div>


<script>
  const gameCont = document.getElementById('game-container')
  const points = document.getElementById('points');
  let all = document.getElementsByTagName("img");
  let images = "";

  for (let i = 0; i < 6; i++){
    images += "<div class='dirtContainer'>";
    images += "<img src='./images/dirt.png' class='dirt-" + i + "'>";
    images += "<img src='./images/mole.png' class='mole-" + i + "'>";
    images += "</div>";
  }

  document.getElementById('imagesDiv').innerHTML = images;
</script>

Upvotes: 0

mathu mitha
mathu mitha

Reputation: 497

To place an image over another image, we can use position: absolute. Wrap the images with div and instead of 2 for loops, one loop will fulfil the requirement.

for (let i = 0; i < 6; i++) {
    var div = document.createElement("div");
    div.classList.add('box');
    var img =  document.createElement('img');
    dirt.src = '/images/dirt.png'
    dirt.classList.add("dirt-" + [i])
    div.appendChild(dirt)
    var mole = document.createElement('img');
    mole.src = '/images/mole.png'
    mole.classList.add("mole-" + [i])
    div.appendChild(mole)
    gameCont.appendChild(div)
  }

Css part:

.box{
  position: relative;
  width: 100px;
  height: 160px;
}

.dirt-0,.dirt-1,.dirt-2, .dirt-3,.dirt-4,.dirt-5 {
    max-width:100%;
    position: absolute;
    top:0;
}

.mole-0,.mole-1,.mole-2, .mole-3,.mole-4,.mole-5{
    z-index:1;
    width:100px;
    height:100px;
}

Upvotes: 1

Related Questions