Question

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

背景div（＆＃34; bg-closer＆＃34;）未按预期放置在堆叠顺序中。它在菜单上（＆＃34;内容＆＃34;），但我希望它在下面。你没有看到它（它应该是红色的）。

有什么问题？这里有一个CodePen：https://codepen.io/lborgman/pen/bYpOej

＆＃13;

  .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;
}

＆＃13;

<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>

＆＃13;

编辑：忘了颜色。我以为我写了＆＃34;背景＆＃34;，但我写了＃34; color＆＃34;。： - （

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的值，以使其显示在前面。

为什么＆＃34; bg-close＆＃34; div高于＆＃34;内容＆＃34; DIV？

1 个答案: