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

Answer 2

pol's solution do works, thx alot.

But as you mentioned, I cant access them because they are overlap.

 (function() { 'use strict'; for (var i = 0; i < 60; i++) { var dotContainer = document.createElement('span'); var dot = document.createElement('span'); var d = document.createElement('span'); $(d).appendTo(dot); $(dot).appendTo(dotContainer); $(dotContainer).addClass('dot-container'); $(dotContainer).appendTo('body'); }; var dots = $('.dot-container'), deg = 45; for (var i = 0; i < dots.length; i++) { (function(index) { setTimeout(function() { $(dots[index]).css({ transform: 'translate(-50%, -50%) rotate(' + deg + 'deg)' }); deg += 360 / 60; }, index * 10); })(i); }; })(); 

 .dot-container { height: 200px; width: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid red; } span span { background: gold; height: 10px; width: 10px; position: absolute; top: 0px; left: 0px; cursor: pointer; z-index: 100; } span span:hover { background: green; } div { border: 1px solid red; } .a { height: 100px; width: 100px; background: rgba(0, 0, 0, 0.1); position: absolute; top: 0px; left: 0px; } .b { height: 100px; width: 100px; background: rgba(0, 0, 0, 0.1); position: absolute; top: 0px; left: 0px; } .c { height: 100px; width: 100px; background: rgba(0, 0, 0, 0.1); position: absolute; top: 0px; left: 0px; } div div { position: absolute; height: 10px; width: 10px; z-index: 100; } div div:hover { background: green; } .a div { background: red; left: 0px; top: 0px; } .b div { background: red; right: 0px; top: 0px; } .c div { background: red; right: 45px; top: 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="a"> <div></div> </div> <div class="b"> <div></div> </div> <div class="c"> <div></div> </div> 

I made another one with actually dom element,

and as the old one, I made their z-index as 100.

I also made a ovelaped square div set which are also overlaped and works well...

So, what makes the overlaped rim goes wrong?

Is it because of translate() ?

Answer 3

I modified your code to make the index-z variable but using your method always the last 15 elements will cover the previous 45 because you are using dots in the top-left part of the span squares 200x200 (15*4). Therefore, all only the last 15 elements are visible.

If move the rotation point to the bottom and change the squares spans into a rectangle 15x200 like this:

Note: I'm using the same with as the dots have (15px).

(function() {
  'use strict';

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

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

  var index = 0;
  if (dots) {
    dots.forEach(function(element) {
      index++
      setTimeout(animate.bind(null, element, index), index * 10);
    });
  }

  function animate(element, count) {
    element.style.transform = 'translate(-50%, -50%) rotate(' + deg + 'deg)';
    deg += 360 / 60;
    element.classList.add('span-animate');
    element.style.zIndex = count;
  }

  /*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: 15px;
  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;
}

<body>
</body>