Menu
If I need #element-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?
502
The z-index only works on the complete content. This is because the HTML rendered controls the positioning before handing off to the SVG rendered to place the internal SVG contents. So, basically there is no z-index for SVG, it uses the painters model.
Positioning and order In order for z-index to have any effect at all, it needs to be applied to a positioned element, that means, an element with position relative , absolute , fixed , or sticky . If you don't apply a z-index , the elements will be stacked in the order they are written in the HTML.
The maximum range is ±2147483647. In CSS code bases, you'll often see z-index values of 999, 9999 or 99999. This is a perhaps lazy way to ensure that the element is always on top. It can lead to problems down the road when multiple elements need to be on top.
If you want to create a custom stacking order, you can use the z-index property on a positioned element. The z-index property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis.
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.
61
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
