多層CSS CSS索引

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

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。

我還制作了一個ovelaped方形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>