How to make gif go behind other elements

Question

I'm making a basic drawing program with only HTML CSS and JavaScript and I'm having trouble with z-index: 1; command. What I'm trying to do is make lol.gif go under all the other elements on the screen. Bellow is the code in which I tried to index it with -1 and all the other elements as 1 but Its not working for me for some reason. Any tips?


<head>
    <img src="logo.png" style="width:50%; margin-right: auto; margin-left: 400px; ">
</head>

<style>

body, a, a:hover { cursor:url('https://66.media.tumblr.com/7659e714cab33f9d59124f924405e793/tumblr_inline_p7g82dZq1h1r466gz_75sq.png'), auto 
}

body {
    background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}



canvas {
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    padding: 5px
    z-index: 1;

}


.tools .color-field {
    height:  40px;
    width: 40px;
    cursor:  pointer;
    display:  inline-block;
    box-sizing:  border-box;
    border-radius: 50%;
    border: 2px solid white;
    align-self:  center;
    margin: 5px 5px ;
    z-index: 1;


}


.color-field {

    display: block;
    margin-left: auto;
    margin-right: auto;

}


.tools {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top: 110px;
}

.tools .button{
    align-self:  center;
    width: 100px;
    height: 40px;
    border: 2px solid white;
    cursor:  pointer;
    color: white;
    background: #DB7093;
    font-weight: bold;
    margin:  0 10px;
    display: block;
    z-index: 1;
    
    

}


.button {

    display: block;
    margin-left: auto;
    margin-right: auto;
}


.color-picker {
    align-self: center;
    margin: 0 15px;
    background-color: pink;
}

.pen-range {
    align-self:  center;
    margin:  o 15px;
    background-color: #DB7093;

}


.container {
  width: 600px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index:-1;
  margin-left:  425px;
  z-index: 1;

}

.lol {
background-image: url("gif.gif");
background-repeat: repeat;
width: 100%;
position: relative;
z-index:-1;
}


</style>


<body style="background-image: url('https://images8.alphacoders.com/105/1055726.png');">



<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> cute drawing program </title>


<img class="lol" src="gif.gif">

<div class="container">
  <div id="status" style="color: white;"></div>
  <img src="container.png" style="width:120%;">
</div>


<div class="field">
<canvas id="canvas"> </canvas>

<div class="tools">
<button type="button" class="button"> Undo </button>
<button type="button" class="button"> Clear </button>


<div onClick="change_color(this)" class="color-field" style="background: red;"></div>
<div onClick="change_color(this)" class="color-field" style="background: blue;"></div>
<div onClick="change_color(this)" class="color-field" style="background: yellow;"></div>
<div onClick="change_color(this)" class="color-field" style="background: green;"></div>
<div onClick="change_color(this)" class="color-field" style="background: orange;"></div>
<div onClick="change_color(this)" class="color-field" style="background: pink;"></div>
<div onClick="change_color(this)" class="color-field" style="background: brown;"></div>
<div onClick="change_color(this)" class="color-field" style="background: gray;"></div>  
<div onClick="change_color(this)" class="color-field" style="background: black;"></div>
<div onClick="change_color(this)" class="color-field" style="background: white;"></div>

<input onInput="draw_color = this.value" type="color" class="color-picker">
<input type="range" min="1" max="100" class="pen-range">

</div>
</div>

<script>
    
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth = 650;
    canvas.height = 350;

    let context = canvas.getContext("2d");
    context.fillStyle = "white";
    context.fillRect(0, 0, canvas.width, canvas.height);

    let draw_color = "black";
    let draw_width = "2";
    let is_drawing = false;


    function change_color(element) {
        draw_color = element.style.background;
    }

    canvas.addEventListener("touchstart", start, false);
    canvas.addEventListener("touchmove", draw, false);
    canvas.addEventListener("mousedown", start, false);
    canvas.addEventListener("mousemove", draw, false);

    canvas.addEventListener("mtouchstart", stop, false);
    canvas.addEventListener("mouseup", stop, false);
    canvas.addEventListener("mouseout", stop, false);


    function start(event) {
        is_drawing = true;
        context.beginPath();
        context.moveTo(event.clientX - canvas.offsetLeft,
                       event.clientY - canvas.offsetTop);

    event.preventDefault();
    }

function draw(event) {
    if ( is_drawing ) {
        context.lineTo(event.clientX - canvas.offsetLeft,
                       event.clientY - canvas.offsetTop);
        context.strokeStyle = draw_color;
        context.lineWidth = draw_width;
        context.lineCap = "round";
        context.lineJoin = "round";
        context.stroke();
    }

    event.preventDefault();
}

function stop(event) {
    if (is_drawing) {
        context.stroke();
        context.closePath();
        is_drawing = false;
    }

    event.preventDefault();
}
</script>



</body>







</html>

Typo which is causing the zindex issue: `padding: 5px z-index: 1;` - put a `;` after the `padding:5px ` — Kinglish, May 28 '21 at 23:10

score 0 · Answer 1 · answered May 28 '21 at 23:14

When you are going to use z-index, you have to set position css (not to static)of the element that you are setting z-index.

Also pay attention to use correct grammar in css block.

canvas {
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    padding: 5px; // you are missing ';'
    z-index: 1;
}

Adnane Ar · Answer 2 · 2021-05-28T23:41:03.020

Here you are i wrote this script for you the secret receipt is the transform-style: preserve-3d and transform: translateZ(-1px)

;(function(){
  if(!gif) return;
  
  document.addEventListener('mousemove', e => {
    
    gif.sizes = {
      width: gif.getBoundingClientRect().width,
      height: gif.getBoundingClientRect().height
    }
    
    gif.style.setProperty('left', `${e.clientX - (gif.sizes.width / 2)}px`);
    gif.style.setProperty('top', `${e.clientY - (gif.sizes.height / 2)}px`);
    
  });
}());

body {
  transform-style: preserve-3d; /* important to use use 3d transforms */
}

.others {
  padding: 10px;
  box-sizing: border-box;
  background: rgba(128,128,128,.85);
  color: black;
  backdrop-filter: sepia(1) invert();
}

#gif {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background: red;
  border-radius: 50%;
  
  transform: translateZ(-1px); /* the key is to set the elements z position to -1px */
}

<div class="others">
  some thing ...
</div>

<div class="others">
  Otherthing ...
</div>

<div id="gif"></div>

score 0 · Answer 3 · answered May 29 '21 at 03:39

CSS property z-index has no effect on elements that are not positioned:

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. ...
For a positioned box (that is, one with any position other than static), the z-index property specifies: ...

To enumerate the current possibilities, z-index is only effective on elements with their CSS position property set to relative, absolute, fixed or sticky.

This first snippet is with no positioning as a base line: clicking the emoji and "Another body element" will each log that they were clicked.

document.querySelector (".lol").addEventListener("click", ()=>console.log("lol"));
document.querySelector (".example").addEventListener("click", ()=>console.log("example"));

<span class="lol"></span>
<span class="example">Another body element</span>

However, if you position the .lol element behind the body element by giving it, say, absolute positioning and a z-index of -1, other elements appear on top of it. A side effect of placing .lol behind the body is that click events don't propogate from the body element down to it: clicking on the emoji in this snippet will not log an event.

document.querySelector (".lol").addEventListener("click", ()=>console.log("lol"));
document.querySelector (".example").addEventListener("click", ()=>console.log("example"));

body {
  /* provide a background to show it doesn't obscure .lol */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAATklEQVRYhe3OMQHAIADAMMC/JLyBgT292JEoyNz7jP9ZrwPftAqtQqvQKrQKrUKr0Cq0Cq1Cq9AqtAqtQqvQKrQKrUKr0Cq0Cq1Cq9AqLpENAttywvtJAAAAAElFTkSuQmCC");
}
.lol {
  position: absolute;
  z-index: -1;   
}
.example {
  display: inline-block;
  border: thin solid teal;
  background-color: white;
  margin-left: 0.7rem;
}

<span class="lol"></span>
<span class="example">Another body element</span>

There are other issues with the project that will need to be resolved, e.g. you can't put <img> tags in the head section of an HTML document - they will terminate the head section. Good luck with further debugging.

How to make gif go behind other elements

3 Answers3