Geek Answers Handbook

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

If I need #element-one be above #element-two , #element-two above #element-three , and #element-three above #element-one , is there a way to do this with CSS? Any other way?

alt text

+7
source share
2 answers

I do not know any methods for this in CSS or JavaScript.

I would divide one element into two parts without noticing it. (In fact, this is not possible in every case, for example, with text fields, but it works well with images.)

So, #element-one-part-A above #element-two , #element-two above #element-three , and #element-three above #element-one-part-B . Technically, this is not a z-index circle, but it does look.

+2
source

It's impossible. The z-index is similar to the photoshop layer, the value is juste at the position on the stack.

Can you try cheating with javascript?

See this 4-element example.

 <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>
+1
source

More articles:


All Articles