Question

如果我需要#element-one高于#element-two，#element-two高于#element-three，#element-three高于#element-one，则有没有办法用CSS做到这一点？还有别的吗？

alt text

Answer 1

我不知道在CSS或JavaScript中执行此操作的任何方法..

我会将一个元素分成两部分，而不会被用户注意到。（实际上这在每种情况下都是不可能的，例如使用文本框，但它适用于图像。）

因此#element-one-part-A高于#element-two，#element-two高于#element-three，#element-three高于#element-one-part-B。从技术上讲，它不是一个z-index圈，但它看起来像。

Answer 2

这是不可能的。 z-index就像是photoshop图层，值是juste堆栈中的位置。

你可以试着用一些javascript作弊吗？

请参阅此示例，包含4个元素

<html>
<body>
  <div id="container">
    <div id="e1" class="common">
      this is element 1
      this is element 1
      this is element 1
    </div>
    <div id="e2" class="common">
      this is element 2
      this is element 2
      this is element 2
    </div>
    <div id="e3" class="common">
      this is element 3
      this is element 3
      this is element 3
    </div>
    <div id="e4" class="common">
      this is element 4
      this is element 4
      this is element 4
    </div>
  </div>

  <style>
    html { font-size: 3em;}
    .common {
      position: absolute;
      overflow: hidden;
    }
    .clone {
      color: red;
      margin-top: -100%;
      background-color: rgba(200, 0, 100, .5) !important;
    }
    .window {
      overflow: hidden;
      width: 50%;
      height: 50%;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: rgba(0,0,0, .2);
    }
    #container {
      width: 600px;
      height: 600px;
      margin: auto;
      background: #eee;
      position: relative;
    }
    #e1 {
      background: yellow;
      color: orange;
      width: 100px;
      height: 500px;
      top: 50px;
      left: 100px;
    }
    #e2 {
      background: lightblue;
      color: blue;
      width: 500px;
      height: 100px;
      top: 100px;
      left: 50px;
    }
    #e3 {
      background: red;
      color: pink;
      width: 100px;
      height: 500px;
      bottom: 50px;
      right: 100px;
    }
    #e4 {
      background: lightgreen;
      color: green;
      width: 500px;
      height: 100px;
      bottom: 100px;
      right: 50px;
    }
  </style>
  <script>
    (function() {
      var clone = document.getElementById('e1').cloneNode(true);
      clone.className = 'common clone';

      var view = document.createElement('div');
      view.className = 'window';
      view.appendChild(clone);

      document.getElementById('container').appendChild(view);
    })();
  </script>
</body>
</html>

有没有办法做z-index圈？

2 个答案: