div的背景不服从z-index属性

Question

我有一个div包装器和一个div行，两者都将position属性设置为relative。包装div具有比内部div更高的z-index并且都具有背景设置，然而，更高的z-index背景仍然低于div的背景。 JS Fiddle Example

＆＃13;

＆＃13;

.wrapper {
  position: relative;
  z-index: 1000;
  border: 1px solid black;
  width: 131px;
  height: 25px;
  background: repeating-linear-gradient( to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 10px, black 11px, black 1px);
}

.row {
  position: relative;
  z-index: -1;
  margin-top: 2px;
  margin-bottom: 1px;
  width: 100%;
  height: 20px;
  background: linear-gradient( to right, rgba(255, 0, 0, 0) 50%, red 50%);
}

＆＃13;

<div class="wrapper">
  <div class="row"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您希望网格线覆盖红色条，请从包装div中删除z-index：

.wrapper {
  position: relative;
  border: 1px solid black;
  width: 131px;
  height: 25px;
  background: repeating-linear-gradient( to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 10px, black 11px, black 1px);
}

.row {
  position: relative;
  z-index: -1;
  margin-top: 2px;
  margin-bottom: 1px;
  width: 100%;
  height: 20px;
  background: linear-gradient( to right, rgba(255, 0, 0, 0) 50%, red 50%);
}

<div class="wrapper">
  <div class="row"></div>
</div>

Answer 2

从包装器div中删除z-index，你应该好好去。

select s.id, s.name
from student s join takes t on s.id = t.id
where t.semester = 'Spring' and
    t.year = 2010
group by s.id, s.name
having count(*) = 1

.wrapper {
  position: relative;
  border: 1px solid black;
  width: 131px;
  height: 25px;
  background: repeating-linear-gradient( to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 10px, black 11px, black 1px);
}

.row {
  position: relative;
  z-index: -1;
  margin-top: 2px;
  margin-bottom: 1px;
  width: 100%;
  height: 20px;
  background: linear-gradient( to right, rgba(255, 0, 0, 0) 50%, red 50%);
}