CSS Z-INDEX具有多层

我在很大程度上使用z索引，

它确实解决了很多问题。

我知道我需要先定位z索引。

，如果我不为父节点提出较低的索引，

它应该总是做技巧？

这是我面临的问题...

(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 a z-index of 100。

，但只有最后一个季度可以访问（用光标更改表示）。

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

我什至尝试将他们的z索引从javaScript从高到低点排列，

但结果仍然相同...

所以，我认为我对z索引的知识是不正确的。

有没有人能帮助我解决这个特定CSS技巧的清晰概念？

问题是元素正在覆盖自己。使它们较小并使用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;
}

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>

我做了另一个用实际元素，

作为旧的，我将他们的z-index作为100。

我还制作了一个Ovelaped Square Div套件，它也被重叠并且效果很好...

那么，是什么使重叠的轮辋出错？

是因为translate()？

我修改了您的代码以使索引-z变量，但使用您的方法始终使用最后15个元素，因为您在跨度的左上角使用了点正方形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>

相关内容

最新更新

热门标签：