Is there any way to do a z-index circle?
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?
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>
加载中,请稍侯......
精彩评论