我有一个包含两个伪元素的元素,:before
和 :after
。父元素使用 z-index: 0
相对定位,两个伪元素使用 z-index: -1
绝对定位。
但是,我无法让父元素堆叠在顶部。我怎样才能解决这个问题?
这是一个说明问题的代码笔:http://codepen.io/zthall/pen/NNmKgZ
SCSS 代码:
.pokeball {
height: $size / 5;
width: $size / 5;
background: white;
border-radius: 50%;
border: ($size / 20) solid $black;
position: relative;
margin: ($size * 4 / 5);
z-index: 1;
&:after,
&:before {
content: '';
display: block;
width: $size;
height: $size / 2;
border-radius: $size $size 0 0;
border: ($size / 20) solid $black;
z-index: -1;
position: absolute;
}
&:after {
background: $red;
top: -$size / 2;
left: -$size / 2;
}
&:before {
background: $white;
top: 0;
left: -$size / 2;
transform: rotate(180deg);
}
}
HTML:
<div class="pokeball"></div>
最佳答案
您可以使用线性和径向渐变来填充圆圈,而不是使用带有伪 :before
和 :after
元素的两个半圆元素。
关于html - 将伪元素的父元素堆叠在顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37194664/