为什么 "bg-closer" div 在 "content" div 上面？

Question

我复制了一个简单的CSS菜单。我想在菜单 div 下面添加一个背景 div。单击此背景 div 应关闭菜单。（我相信 Android 上的那种建议行为。）

背景div ("bg-closer") 没有按我预期的顺序放置。它在菜单上方 ("contents")，但我希望它在下方。而且你没有看到它（它应该是红色的）。

怎么了？这里有一个CodePen：https://codepen.io/lborgman/pen/bYpOej

  .tabs {
  position: relative;
  clear: both;
  margin: 50px;
}

.tab {
  float: left;
  position: relative;
}

.tab label {
  background: linear-gradient(#eee, #ccc);
  padding: 10px 30px;
  cursor: pointer;
  text-align: center;
  display: block;
  position: relative;
}

.tab label i {
  font-style: normal;
  font-size: 10px;
  color: #aaa;
}

.tab [type=radio] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  z-index: 1;
}

.content {
  position: absolute;
  top: 100%;
  opacity: 0;
  left: 0;
  background: #333;
  color: white;
  padding: 20px;
}

.content ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.content a {
  color: white;
  display: block;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid #999;
  padding: 5px;
}

[type=radio]:checked~label {
  z-index: 2;
}

[type=radio]:checked~label~.content {
  z-index: 1;
  opacity: 1;
}

.close-tab {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.close-tab label {
  background: #333;
  color: white;
}

[type=radio]:checked~label~.close-tab {
  z-index: 3;
}

.bg-closer {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  color: #f00;
}

<div class="tab">
  <input type="radio" id="tab-1" name="tab-group-1">
  <label for="tab-1">List 1 <i>▼</i></label>
  <div class="tab close-tab">
    <input type="radio" id="tab-close" name="tab-group-1">
    <label for="tab-close">List 1 <i>▲</i><div class="bg-closer"></div></label>
  </div>
  <div class="content">
    <ul>
      <li><a href="#">Menu Item #1</a></li>
      <li><a href="#">Menu Item #2</a></li>
      <li><a href="#">Really Long Menu Item #3</a></li>
      <li><a href="#">Menu Item #4</a></li>
      <li><a href="#">Menu Item #5</a></li>
    </ul>
  </div>
</div>

编辑：忘记颜色。我以为我写了"background"，但我写了"color"。 :-(

Answer 1

试试这个：

[type=radio]:checked ~ label ~ .content {
    z-index: 3;
    opacity: 1;
}

解释：

前面的元素有z-index:3

[type=radio]:checked~label~.close-tab {
  z-index: 3;
}

所以你需要给下一个元素一个z-index值大于等于3才能让它出现在前面

为什么 "bg-closer" div 在 "content" div 上面？

Why is the "bg-closer" div above the "content" div?

html

css

z-index