html - 你能把 'stack' 一个 div *上面* 一个 div 设置为显示 : table-cell?

Question

我正在尝试创建一个切换开关，您可以在其中点击一侧，然后背景会滑过以使该侧“处于事件状态”。

为了适应可变宽度，我使用 display: table 设置了切换的两侧。这很好用。然后，我将第三个 div 添加到组合中，作为将来回滑动的“事件按钮”。

问题出在第 3 个 div。当我需要它时，它最终位于文本之上。我希望 z-index 可以解决这个问题，但没有。有没有办法在这里完成我想要的？

HTML:

<div class="wrapper">
  <div class="tbl">
    <div class="tbl-cl">1</div>
    <div class="tbl-cl">2</div>
    <div class="bgnd"></div>
  </div>
</div>

CSS:

.wrapper {
  float: left;
  overflow: auto;
  position: relative;
  border: 1px solid red;
}

.tbl {
  display: table;
  border: 1px solid blue;
}

.tbl-cl {
  display: table-cell;
  padding: 10px;
  width: 50%;
  z-index: 2;
}

.bgnd {
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid green;
  background: rgba(255,0,0,.8);
  width: 50%;
  height: 100%;
  z-index: 1;
}

Live Demo @jsbin

Answer 1

您可以通过将 .bgnd 元素作为 CSS 表格的同级元素来实现布局。

然后您可以通过调整左侧偏移量将“ slider ”向右移动。

注意:您可以将 .bgnd 元素保留为 .tbl 的子元素，CSS 将具有相同的效果。

.wrapper {
  float: left;
  overflow: auto;
  position: relative;
  border: 1px solid red;
}
.tbl {
  display: table;
  border: 1px solid blue;
}
.tbl-cl {
  display: table-cell;
  padding: 10px;
  width: 50%;
  z-index: 2;
}
.bgnd {
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid green;
  background: rgba(255, 0, 0, 1);
  top: 0;
  left: 0%; /* set to 50% to slide to right */
  width: 50%;
  bottom: 0;
  z-index: -1;
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="tbl">
    <div class="tbl-cl">1</div>
    <div class="tbl-cl">2</div>
  </div>
  <div class="bgnd"></div>
</div>