你可以堆叠吗？一个div *高于*一个div设置显示：table-cell？

Question

我尝试创建一个切换按钮，您可以点击一侧，背景滑过以使该侧“活跃”。

为了适应可变宽度，我使用display: table设置切换的两侧。这非常有效。然后我在混音中添加第3个div作为“活动按钮”＃39;会来回滑动。

问题是第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表的兄弟来实现布局。

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

注意：您可以将.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>