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为它们提供转换的起点。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: