将div放在表格单元格内的其他div前面

Question

在表格单元格中，我有 .interval div，它必须并排显示，而且我还有 .shift div，必须出现在前面的 .interval div并且具有特定的＆＃39; left＆＃39;和＃＆＃39;宽度＆＃39;值。

到目前为止，我设法按照我想要的方式将div放在不同的单元格上（ .interval div在第一行， .shift div在第二行）：

但是如何将它们放在同一个单元格中，如下图所示？

我目前的代码：

＆＃13;

＆＃13;

table {
  width: 100%;
}
table tr,
table tr td {
  height: 48px;
}
table tr td {
  background-color: #EDEDED
}
.interval {
  height: 48px;
  float: left;
  background-color: #f9f2e2;
  box-sizing: border-box;
  border-left: solid 1px #d5cbc2;
  width: 10%;
}
.shift {
  height: 40px;
  float: left;
  position: relative;
  background-color: #e9e2d2;
}
.shift1 {
  left: 10%;
  width: 20%;
}
.shift2 {
  left: 40%;
  width: 10%;
}
.shift3 {
  left: 80%;
  width: 20%;
}

＆＃13;

<table>
  <tr>
    <td>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="shift shift1"></div>
      <div class="shift shift2"></div>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你需要给.shift position:absolute;并将其放在其他div中，然后定位它们。

包含.shift元素的Div必须具有position:relative属性。

这是jsfiddle https://jsfiddle.net/8tkue3qn/

Answer 2

我找到了怎么做：

＆＃13;

＆＃13;

Collectors.joining()

＆＃13;

table {
  width: 100%;
}
table tr,
table tr td {
  height: 48px;
}
table tr td {
  background-color: #EDEDED;
  position: relative;
}
.inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 48px;
}
.interval {
  height: 48px;
  float: left;
  background-color: #f9f2e2;
  box-sizing: border-box;
  border-left: solid 1px #d5cbc2;
  width: 10%;
}
.shift {
  margin: 4px 0;
  height: 40px;
  float: left;
  position: relative;
  background-color: #e9e2d2;
}
.shift1 {
  left: 10%;
  width: 20%;
}
.shift2 {
  left: 40%;
  width: 10%;
}

＆＃13;

＆＃13;

＆＃13;