我想通过z-index
CSS属性创建一个自相矛盾的效果。
在我的代码中,我有五个圆圈,如下图所示,它们都是绝对定位的,没有定义z-index
。因此,默认情况下,每个圆圈都与前一个圆圈重叠。
现在,圆圈5与圆圈1重叠(左图)。我想要实现的悖论是同时在圆圈2下面和圆圈5上面圈出1圈(如右图所示)。
http://paradox.schramek.cz/1.jpg
这是我的代码
加价:
<div class="item i1">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div>
<div class="item i5">5</div>
CSS
.item {
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid red;
background: silver;
border-radius: 50%;
text-align: center;
}
.i1 { position: absolute; top: 30px; left: 0px; }
.i2 { position: absolute; top: 0px; left: 35px; }
.i3 { position: absolute; top: 30px; left: 65px; }
.i4 { position: absolute; top: 70px; left: 50px; }
.i5 { position: absolute; top: 70px; left: 15px; }
http://jsfiddle.net/Kx2k5/也提供了一个实例。
我尝试了很多堆叠订单,堆叠上下文等技术。我读了一些关于这些技术的文章,但没有成功。我该如何解决这个问题?
答案 0 :(得分:91)
这是我的尝试:http://jsfiddle.net/Kx2k5/1/
(已在Fx27
,Ch33
,IE9
,Sf5.1.10
和Op19
上成功测试了
<强> CSS 强>
.item {
/* include borders on width and height */
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
box-sizing : border-box;
...
}
.i1:after {
content: "";
/* overlap a circle over circle #1 */
position : absolute;
z-index : 1;
top : 0;
left : 0;
height : 100%;
width : 100%;
/* inherit border, background and border-radius */
background : inherit;
border-bottom : inherit;
border-radius : inherit;
/* only show the bottom area of the pseudoelement */
clip : rect(35px 50px 50px 0);
}
基本上我在第一个圆圈上重叠:after
个伪元素(继承了一些属性),然后我用clip()
属性修剪了它,所以我只做了它的底部部分可见(圆圈#1
与圆圈#5
重叠)。
对于我在此处使用的CSS属性,此示例应该在IE8上工作(box-sizing
,clip()
,inherit
,并且支持伪元素)
结果效果的屏幕截图
答案 1 :(得分:29)
我的尝试也使用了clip
。我的想法是div
占一半。这样设置z-index
就行了。
因此,您可以将顶部设置为z-index: -1
,将底部设置为z-index: 1
。
.item {
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid red;
background: silver;
border-radius: 50%;
text-align: center;
}
.under {
z-index: -1;
}
.above {
z-index: 1;
overflow: hidden;
clip: rect(30px 50px 60px 0);
}
.i1 {
position: absolute;
top: 30px;
left: 0px;
}
.i2 {
position: absolute;
top: 0px;
left: 35px;
}
.i3 {
position: absolute;
top: 30px;
left: 65px;
}
.i4 {
position: absolute;
top: 70px;
left: 50px;
}
.i5 {
position: absolute;
top: 70px;
left: 15px;
}
<div class="item i1 under">1</div>
<div class="item i1 above">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div>
<div class="item i5">5</div>
注意:在IE 10 +,FF 26 +,Chrome 33+和Safari 5.1.7 +上进行了测试。
答案 2 :(得分:18)
这是我的理由。
我还使用位于第一个圆圈顶部的伪元素,但不是使用剪辑,我保持其背景透明,只是给它一个插入框阴影,与圆圈的背景颜色(银色)相匹配作为红色边框覆盖圆圈边界的右下角。
CSS(与起点不同)
.i1 {
position: absolute; top: 30px; left: 0px;
&:before {
content: '';
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: inset 5px -5px 0 6px silver;
border-bottom: solid 1px red;
}
}
最终产品
答案 3 :(得分:4)
可悲的是,以下只是一个理论上的答案,因为某些原因我不能让-webkit-transform-style: preserve-3d;
工作(必须犯一些明显的错误,但似乎无法弄明白)。无论哪种方式,在阅读你的问题之后我 - 就像每个悖论一样 - 想知道为什么它只是一个明显的不可能性,而不是一个真实的。再过几秒钟,我意识到在现实生活中叶子会旋转一点,从而允许这样的东西存在。那么我想编写一个简单的技术演示,但没有以前的属性是不可能的(它被绘制到平面父层)。无论哪种方式,这里都是基本代码
<div class="container">
<div>
<div class="i1 leaf">
<div class="item">1</div>
</div>
<div class="i2 leaf">
<div class="item">2</div>
</div>
<div class="i3 leaf">
<div class="item">3</div>
</div>
<div class="i4 leaf">
<div class="item">4</div>
</div>
<div class="i5 leaf">
<div class="item">5</div>
</div>
</div>
</div>
和css:
.i1 {
-webkit-transform:rotateZ(288deg)
}
.i2 {
-webkit-transform:rotateZ(0deg)
}
.i3 {
-webkit-transform:rotateZ(72deg)
}
.i4 {
-webkit-transform:rotateZ(144deg)
}
.i5 {
-webkit-transform:rotateZ(216deg)
}
.leaf {
position:absolute;
left:35px;
top:35px;
}
.leaf > .item {
-webkit-transform:rotateY(30deg) translateY(35px)
}
你可以找到full code here。
答案 4 :(得分:2)
<强> HTML 强>
<div class="item i1">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div>
<div id="five">5</div>
<div class="item2 i5"></div>
<div class="item3 i6"></div>
<强> CSS 强>
.item {
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid red;
background: silver;
border-radius: 50%;
text-align: center;
}
.item2 {
width: 25px;
height: 50px;
line-height: 50px;
border: 1px solid red;
border-right: none;
border-radius: 50px 0 0 50px;
background: silver 50%;
background-size: 25px;
text-align: center;
z-index: -3;
}
.item3 {
width: 25px;
height: 50px;
line-height: 50px;
border: 1px solid red;
border-left: none;
border-radius: 0 50px 50px 0;
background: silver 50%;
background-size: 25px;
text-align: center;
}
.i1 {
position: absolute;
top: 30px;
left: 0px;
}
.i2 {
position: absolute;
top: 0px;
left: 35px;
}
.i3 {
position: absolute;
top: 30px;
left: 65px;
}
.i4 {
position: absolute;
top: 70px;
left: 55px;
}
.i5 {
position: absolute;
top: 70px;
left: 15px;
}
.i5 {
position: absolute;
top: 72px;
left:19px;
}
.i6 {
position: absolute;
top: 72px;
left: 44px;
}
#five {
position: absolute;
top: 88px;
left: 40px;
z-index: 100;
}
答案 5 :(得分:0)
也适用于IE8。
<强> HTML 强>
<div class="half under"><div class="item i1">1</div></div>
<div class="half above"><div class="item i1">1</div></div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div>
<div class="item i5">5</div>
<强> CSS 强>
.item {
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid red;
background: silver;
border-radius: 50%;
text-align: center;
}
.half {
position: absolute;
overflow: hidden;
width: 52px;
height: 26px;
line-height: 52px;
text-align: center;
}
.half.under {
top: 30px;
left: 0px;
z-index: -1;
border-radius: 90px 90px 0 0;
}
.half.above {
top: 55px;
left: 0px;
z-index: 1;
border-radius: 0 0 90px 90px;
}
.half.above .i1 { margin-top:-50%; }
.i2 { position: absolute; top: 0px; left: 35px;}
.i3 { position: absolute; top: 30px; left: 65px;}
.i4 { position: absolute; top: 70px; left: 50px; }
.i5 { position: absolute; top: 70px; left: 15px; }