Is there any way to do a z-index circle?_问答_开发者

Is there any way to do a z-index circle?

开发者 https://www.devze.com 2023-02-03 01:38 出处：网络

If I need #element开发者_JAVA技巧-one to be above #element-two, #element-two to be above #element-three, and #element-three to be above #element-one, is there any way to do this with CSS? Any other wa

相关专题：css

If I need #element开发者_JAVA技巧-one to be above #element-two, #element-two to be above #element-three, and #element-three to be above #element-one, is there any way to do this with CSS? Any other way?

Is there any way to do a z-index circle?

I don't know any methods to do this in CSS or JavaScript..

I would split up one element into two parts, without it's noticed by user. (Actually this is not possible in every case, e.g. with text boxes, but it works well with images.)

So #element-one-part-A is above #element-two, #element-two is above #element-three, and #element-three is above #element-one-part-B. Technically it's not a z-index circle, but it looks like.

It's impossible. z-index are like photoshop layer, the value is juste the position in the stack.

You can try cheating with some javascript ?

See this exemple with 4 elements

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