html - 伪元素 ::before 和 ::after 的 z-index 问题
问题描述
我正在尝试制作 3d 图层(矩形),其中一段文本将穿过这些图层。但是,我无法弄清楚为什么 z-index 不会在 ::before 和 ::after 上更新。我读过它可能与位置有关:绝对,但是当我将伪元素设置为位置:相对时,它们不再显示
这是我目前拥有的模板
<div class="container">
<div class="section--quote__quote">
Some Text Here
</div>
<div
v-observe-visibility="visibilityChanged"
class="section--quote__graphic"
>
<div v-for="i in 5" :key="`layer--${i}`" class="layer" />
</div>
</div>
这是我的风格 lang="scss"
.section--quote__container {
flex-basis: 50%;
position: relative;
@media (min-width: $breakpoint-tablet) {
padding-right: 120px;
}
.section--quote__graphic {
margin-top: -20vw;
height: 75vw;
@media (min-width: $breakpoint-tablet) {
padding-top: 0;
margin-top: -50px;
height: auto;
}
}
.section--quote__quote {
font-family: $wide;
margin: 0 50px;
font-size: 6vw;
letter-spacing: -0.94px;
@media (min-width: $breakpoint-tablet) {
font-size: 26px;
margin: 200px 50px auto 50px;
}
}
}
.layer {
display: block;
width: 40vw;
height: 60vw;
margin: 0 auto -55vw auto;
transform: rotate(-50deg) skew(10deg, 20deg);
&::before {
content: '';
width: inherit;
height: inherit;
position: absolute;
border-top: solid 1.5px $gray-l;
border-right: solid 1.5px $gray-l;
z-index: -1;
}
&::after {
content: '';
width: inherit;
height: inherit;
position: absolute;
border-bottom: solid 1.5px $gray-l;
border-left: solid 1.5px $gray-l;
z-index: 1;
}
@media (min-width: $breakpoint-tablet) {
width: 13vw;
height: 23vw;
margin-bottom: -25vw;
}
解决方案
推荐阅读
- amazon-ec2 - 其他实例管理控制台的最佳 EC2 实例类型
- loops - Pyspark - IndentationError:预期使用 Cloudera 虚拟机的缩进块
- reactjs - 反应:CSS类名导入不起作用
- apache-spark - 在 Windows 10 中启动 Spark Thrift 服务器
- javascript - Document.getElementById(...) 在 Laravel 视图中为 Null
- javascript - AngularJS 无法在 websocket 回调中使用范围
- android - Android studio missing "Order a translation" button
- python - Python缺少参数
- mysql - Oracle:获取具有相同日期的最后一条记录
- mongodb - MongoDB aggregation $graphLookup - find "connections" in common in collections of following relationships