css z-index悖论花？
css z-index悖论花？
提问于 2018-04-02 01:13:32
我想通过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; }我尝试了很多技术，包括堆叠顺序，堆叠上下文等等。我读过一些关于这些技巧的文章，但没有成功。我怎么解决这个问题？
回答 2
Stack Overflow用户
发布于 2018-04-02 09:52:27
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)
结果效果截图
Stack Overflow用户
发布于 2018-04-02 10:31:50
我的尝试用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100007894
复制相关文章
相似问题
腾讯云开发者
