javascript - 具有多层的css z-index

Question

我经常使用 z-index，

它确实解决了一堆问题。

我知道在应用 z-index 之前我需要先定位。

如果我不给父节点放一个较低的索引，

它总能奏效吗？

这是我面临的问题...

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

我试图通过使用 :after 旋转跨度来制作一个圆圈使用 transform: rotate()

并给出所有 :after一个z-index 100 个。

但只有最后四分之一是可访问的(用光标变化表示)。

显然其余的点被更高层覆盖。

我什至尝试用 javascript 从高到低排列他们的 z-index，

但结果还是一样...

所以，我假设我对 z-index 的了解是不正确的。

有没有人可以帮助我清楚地了解这个特定的 CSS 技巧？

Answer 1

问题是元素覆盖了自己。使它们更小并使用 transform-origin 为它们提供转换的起点。

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