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

我尝试通过使用 transform: rotate()

旋转 :after 的跨度来制作圆圈

并给所有 :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;
}

Answer 2

pol 的解决方案确实有效，非常感谢。

但是正如你所说，我无法访问它们，因为它们重叠。

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

我用 dom 元素做了另一个，

和以前一样，我把他们的z-index设为100。

我还制作了一个重叠的正方形 div 组，它们也重叠并且效果很好...

那么，是什么让重叠的边缘出错了？

是因为translate()吗？

Answer 3

我修改了您的代码以生成 index-z 变量，但使用您的方法时，最后 15 个元素将覆盖前 45 个元素，因为您在 200x200 (15*4) 跨度方块的左上角使用点).因此，只有最后 15 个元素是可见的。

如果将旋转点移动到底部并将正方形跨度更改为 15x200 的矩形，如下所示：

注意：我使用的是与点相同的 (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>

css 具有多层的 z-index

css z-index with multiple layers

html

javascript

css

z-index

css-position