Search code examples
javascripthtmlcssz-index

I am trying to set the z-index for an image but it's not working

I am trying to set the z-index for an image, but it's not working. Actually, the position is absolute and also, I've checked the parents z-indexes with this code to be sure that z-index is none.

var el = document.getElementById("bear-moving"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex);
} while(el.parentElement && (el = el.parentElement));

My image is moving according to the scroll and it needs to be centered. If I set the z-index, it will work only before it starts to move.

This code represents the JS to move the image.

var container = document.getElementsByClassName('elementor-element-192d237');
var image1 = document.getElementById('bear-moving');
var index = 0;
document.addEventListener("scroll", () => {

    div = document.querySelector(".elementor-element-192d237");
  if(parseInt(div.getBoundingClientRect().top)-300 < 0 && parseInt(div.getBoundingClientRect().bottom)>430) {
      var style_top = 0;
    while (style_top<window.innerHeight/2-div.getBoundingClientRect().top-25) {
        style_top = style_top+5;
        image1.style.top = style_top + 'px';
    }

  }
})

enter image description here

enter image description here

Solution

  • After hours of trying to set the z-index and guessing what's the problem, I figured out that it is a background transparent image...