z-index不适用于伪元素

Question

更新（抱歉，但我正在尝试编辑）我会这样的书签：

我正在为网站制作书签，但是当我使用＆＃39; z-index＆＃39;它不起作用。 （见图）:(

我在这个网站上看过一些关于这个问题的帖子，我试图更改代码，但它仍然没有用。

这是代码的链接： http://jsfiddle.net/c62yhxay/1/

或者如果您愿意：

＆＃13;

＆＃13;

.fix {
  padding: 30px;
}
.box {
  border-bottom: 3px solid #bebebd;
  margin-bottom: 25px;
  background-color: #fff;
  box-shadow: 0px 0px 9px #D4D4D4;
  z-index: 10;
  position: relative;
}
.box>.row {
  border: 1px solid #000;
}
.box>.row .bookmark {
  position: relative;
  left: -20px;
  width: 110px;
  height: 32px;
  padding-left: 53px;
  line-height: 32px;
  font-size: 12px;
  color: #fff;
  z-index: 20;
}
.box>.row .bookmark:before {
  content: "";
  transform: rotate(40deg);
  width: 40px;
  height: 30px;
  top: 10px;
  left: -4px;
  z-index: 2;
  position: absolute;
}
.bookmark-blue {
  background-color: #5f7fc0;
}
.bookmark-blue:before {
  background-color: #5471AB;
}
.bookmark-red {
  background-color: #d44e4d;
}
.bookmark-red:before {
  background-color: #b5464d;
}

＆＃13;

<div class="box">
  <div class="row">
    <div class="bookmark bookmark-red">bookmark1</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
  </div>
  <div class="row">
    <div class="bookmark bookmark-blue">bookmark2</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需从z-index类

中删除.bookmark属性即可

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

.fix {
   padding:30px;
}
.box {
    border-bottom:3px solid #bebebd;
    margin-bottom:25px;
    background-color: #fff;
    box-shadow: 0px 0px 9px #D4D4D4;
    position:relative;
}
.box>.row {
    border:1px solid #000;
}
.box>.row .bookmark {
    position:relative;
    left:-20px;
    width: 110px;
    height: 32px;
    padding-left: 53px;
    line-height: 32px;
    font-size: 12px;
    color: #fff;
}
.box>.row .bookmark:before {
    content:"";
    transform: rotate(40deg);
    width: 40px;
    height: 30px;
    top: 10px;
    left: -4px;
    z-index: -1;
    position:absolute;
}
.bookmark-blue {
    background-color: #5f7fc0;
}
.bookmark-blue:before {
    background-color: #5471AB;
}
.bookmark-red {
    background-color: #d44e4d;
}
.bookmark-red:before  {
    background-color: #b5464d;
}

<div class="fix">                
<div class="box">
                    <div class="row">
                        <div class="bookmark bookmark-red">bookmark1</div>
                        <br><br><br><br><br><br><br><br><br>
                        <div class="clearfix"></div>
                    </div>
                    <div class="row">
                        <div class="bookmark bookmark-blue">bookmark2</div>
                        <br><br><br><br><br><br><br><br><br>
                    </div>
                </div>
                            </div>

Answer 2

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

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