css z-index with multiple layers

Question

I use z-index quite a lot,

It does solve a bunch of problems.

I knew I need to positioning first before apply z-index.

and if I don't put a lower index to the parent node,

it should always do the trick?

Here's the problem I'm facing...

(function() {
  'use strict';

  for (var i = 0; i < 60; i++) {
    var dot = document.createElement('span');
    document.querySelector('body').appendChild(dot);
  }

  var dot = document.querySelectorAll('span'),
    deg = 45;

  for (var j = 0; j < dot.length; j++) {
    (function(index) {
      setTimeout(function() {
        dot[index].style.transform = 'translate(-50%, -50%) rotate(' + deg + 'deg)';
        deg += 360 / 60;
        dot[index].classList.add('span-animate');
      }, index * 10);
    })(j);
  };

})();

span {
  height: 200px;
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

span:after {
  cursor: pointer;
  content: "";
  height: 15px;
  width: 15px;
  background: gold;
  display: block;
  border-radius: 50%;
  transition: 0.3s ease-in-out;
  position: absolute;
  top: 0px;
  left: 0px;
}

.span-animate:after {
  height: 8px;
  width: 8px;
  z-index: 100;
}

I tried to make a circle by rotate a span with :after using transform: rotate()

and giving all the :after a z-index of 100.

But only the last quarter of them are accessible(represented with cursor change).

Apparently the rest of dots are covered by higher layers.

I've even tried to arrange their z-index from high to low by javascript,

but the result is still the same...

So, I assume my knowledge about z-index is not correct.

Is there anyone can help me out with a clear concept of this specific css trick?

Answer 1

The problem is that the elements are covering themselves. Make them smaller and use transform-origin to give them a starting point for transformations.

(function() {
  'use strict';

  for (var i = 0; i < 60; i++) {
    var dot = document.createElement('span');
    document.querySelector('body').appendChild(dot);
  }

  var dot = document.querySelectorAll('span'),
    deg = 45;

  for (var j = 0; j < dot.length; j++) {
    (function(index) {
      setTimeout(function() {
        dot[index].style.transform = 'translate(-50%, -50%) rotate(' + deg + 'deg)';
        deg += 360 / 60;
        dot[index].classList.add('span-animate');
      }, index * 10);
    })(j);
  };

})();

span {
  height: 150px;
  width: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom;
  transform: translate(-50%, -50%) rotate(45deg);
}

span:after {
  cursor: pointer;
  content: "";
  height: 15px;
  width: 15px;
  background: gold;
  display: block;
  border-radius: 50%;
  transition: 0.3s ease-in-out;
  position: absolute;
  top: 0px;
  left: 0px;
}

.span-animate:after {
  height: 8px;
  width: 8px;
  z-index: 100;
}