Html z索引不适用于伪元素

更新（抱歉，我正在尝试编辑）我想要的书签如下：

我正在为一个网站制作书签，但当我使用“z-index”时，它不起作用。（见图）：(

我在这个网站上看到了一些关于这个问题的帖子，我试图修改代码，但仍然不起作用

这是代码的链接：

或者，如果您愿意：

.fix{
填充：30px；
}
.盒子{
边框底部：3px实心#bebebd；
边缘底部：25px；
背景色：#fff；
盒影：0px 0px 9px#d4；
z指数：10；
位置：相对位置；
}
.box>.row{
边框：1px实心#000；
}
.box>.row.bookmark{
位置：相对位置；
左：-20px；
宽度：110px；
高度：32px；
左侧填充：53px；
线高：32px；
字体大小：12px；
颜色：#fff；
z指数：20；
}
.box>.row.bookmark:之前{
内容：“；
变换：旋转（40度）；
宽度：40px；
高度：30px；
顶部：10px；
左：-4px；
z指数：2；
位置：绝对位置；
}
.书签蓝色{
背景色：#5f7fc0；
}
.书签蓝色：之前{
背景色：#5471AB；
}
.书签红色{
背景色：#d44e4d；
}
.红色书签：之前{
背景色：#b5464d；
}

书签1


















书签2

这个问题是因为伪元素是作为主元素的子元素的结构。通过从.bookmark中完全删除z索引并将伪元素的z索引设置为任何负值，可以达到相同的结果

working fiddle : http://jsfiddle.net/c9vqjeww/1/

---

这个问题是因为伪元素是作为主元素的子元素的结构。通过从.bookmark中完全删除z-index并将伪元素的z-index设置为任何负值，可以达到相同的结果

working fiddle : http://jsfiddle.net/c9vqjeww/1/

---

只需从

.bookmark

类中删除

z-index

属性

  .box>.row .bookmark {
  position: relative;
  left: -20px;
  width: 110px;
  height: 32px;
  padding-left: 53px;
  line-height: 32px;
  font-size: 12px;
  color: #fff;
}

.fix{
填充：30px；
}
.盒子{
边框底部：3px实心#bebebd；
边缘底部：25px；
背景色：#fff；
盒影：0px 0px 9px#d4；
位置：相对位置；
}
.box>.row{
边框：1px实心#000；
}
.box>.row.bookmark{
位置：相对位置；
左：-20px；
宽度：110px；
高度：32px；
左侧填充：53px；
线高：32px；
字体大小：12px；
颜色：#fff；
}
.box>.row.bookmark:之前{
内容：“；
变换：旋转（40度）；
宽度：40px；
高度：30px；
顶部：10px；
左：-4px；
z指数：-1；
位置：绝对位置；
}
.书签蓝色{
背景色：#5f7fc0；
}
.书签蓝色：之前{
背景色：#5471AB；
}
.书签红色{
背景色：#d44e4d；
}
.红色书签：之前{
背景色：#b5464d；
}

书签1










书签2

只需从

.bookmark

类中删除

z-index

属性即可

  .box>.row .bookmark {
  position: relative;
  left: -20px;
  width: 110px;
  height: 32px;
  padding-left: 53px;
  line-height: 32px;
  font-size: 12px;
  color: #fff;
}

.fix{
填充：30px；
}
.盒子{
边框底部：3px实心#bebebd；
边缘底部：25px；
背景色：#fff；
盒影：0px 0px 9px#d4；
位置：相对位置；
}
.box>.row{
边框：1px实心#000；
}
.box>.row.bookmark{
位置：相对位置；
左：-20px；
宽度：110px；
高度：32px；
左侧填充：53px；
线高：32px；
字体大小：12px；
颜色：#fff；
}
.box>.row.bookmark:之前{
内容：“；
变换：旋转（40度）；
宽度：40px；
高度：30px；
顶部：10px；
左：-4px；
z指数：-1；
位置：绝对位置；
}
.书签蓝色{
背景色：#5f7fc0；
}
.书签蓝色：之前{
背景色：#5471AB；
}
.书签红色{
背景色：#d44e4d；
}
.红色书签：之前{
背景色：#b5464d；
}

书签1










书签2

想要的行为是什么？它应该看起来怎么样？后面有伪元素吗？如果你有关于它应该看起来怎么样的图片，我们可能会提供更多建议。谢谢大家，现在开始工作！想要的行为是什么？它应该看起来怎么样？后面有伪元素吗？如果你有关于它应该怎么样的图片看，我们可能会提供更多的建议。谢谢大家，现在开始工作！