Fatal编程技术网
  • javascript/
  • Javascript 使用位置时重叠div上的表：绝对

Javascript 使用位置时重叠div上的表：绝对

javascript html css

Javascript 使用位置时重叠div上的表：绝对,javascript,html,css,css-position,Javascript,Html,Css,Css Position,我试图在表上创建列锁定效果。但是，当I锁定它们从父div流出（显示在父div顶部）的列时 我尝试设置列数据和父div的zIndex，这会导致div显示在列的顶部但是，比视口大的部分列仍然显示在div之外。 我几乎可以肯定这是位置的问题：绝对以及它如何从文档流中删除元素，但我无法找到一种不使用position:absolute的方法。我想了解是什么导致了重叠问题，以及如何用简单的旧html/css/js修复它 顺便说一句，我不是在寻找jQuery插件解决方案来创建锁定的表列。 <style&

我试图在表上创建列锁定效果。但是，当I锁定它们从父div流出（显示在父div顶部）的列时

我尝试设置列数据和父div的
zIndex
，这会导致div显示在列的顶部但是，比视口大的部分列仍然显示在div之外。

我几乎可以肯定这是
位置的问题：绝对
以及它如何从文档流中删除元素，但我无法找到一种不使用
position:absolute
的方法。我想了解是什么导致了重叠问题，以及如何用简单的旧html/css/js修复它

顺便说一句，我不是在寻找jQuery插件解决方案来创建锁定的表列。

<style>
  table {
    border-top: 1px solid;
    border-right: 1px solid;
    border-left: 1px solid;
    border-collapse: collapse;
  }

  .data-table td {
    border-top: 1px solid;
    background-color: gray;
    width: 74px;
    border-right: 1px solid;
  }

  .data-table {
    border-bottom: 1px solid;
    table-layout: fixed;
  }

  .col-header {
    width: 74px;
  }

  .container {
    width: 500px;
    height: 100px;
    overflow: scroll;
  }
</style>
<body>
  <div class="container">
    <table class="data-table" id="column-data-table">
      <thead>
        <tr>
          <td data-column-index="0">
            <div class="col-header"> Column 1 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="1">
            <div class="col-header"> Column 2 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="2">
            <div class="col-header"> Column 3 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="3">
            <div class="col-header"> Column 4 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="4">
            <div class="col-header"> Column 5 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="5">
            <div class="col-header"> Column 6 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="6">
            <div class="col-header"> Column 7 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="7">
            <div class="col-header"> Column 8 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="8">
            <div class="col-header"> Column 9 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="9">
            <div class="col-header"> Column 10 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="10">
            <div class="col-header"> Column 11 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="11">
            <div class="col-header"> Column 12 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
          <td data-column-index="12">
            <div class="col-header"> Column 13 </div>
            <div onclick="lockColumns(event);"> Lock </div>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td> Data 1 </td>
          <td> Data 2</td>
          <td> Data 3</td>
          <td> Data 4</td>
          <td> Data 5</td>
          <td> Data 6</td>
          <td> Data 7</td>
          <td> Data 8</td>
          <td> Data 9</td>
          <td> Data 10</td>
          <td> Data 11</td>
          <td> Data 12</td>
          <td> Data 13</td>
        </tr>
        <tr>
          <td> Data 1 </td>
          <td> Data 2</td>
          <td> Data 3</td>
          <td> Data 4</td>
          <td> Data 5</td>
          <td> Data 6</td>
          <td> Data 7</td>
          <td> Data 8</td>
          <td> Data 9</td>
          <td> Data 10</td>
          <td> Data 11</td>
          <td> Data 12</td>
          <td> Data 13</td>
        </tr>
        <tr>
          <td> Data 1 </td>
          <td> Data 2</td>
          <td> Data 3</td>
          <td> Data 4</td>
          <td> Data 5</td>
          <td> Data 6</td>
          <td> Data 7</td>
          <td> Data 8</td>
          <td> Data 9</td>
          <td> Data 10</td>
          <td> Data 11</td>
          <td> Data 12</td>
          <td> Data 13</td>
        </tr>
        <tr>
          <td> Data 1 </td>
          <td> Data 2</td>
          <td> Data 3</td>
          <td> Data 4</td>
          <td> Data 5</td>
          <td> Data 6</td>
          <td> Data 7</td>
          <td> Data 8</td>
          <td> Data 9</td>
          <td> Data 10</td>
          <td> Data 11</td>
          <td> Data 12</td>
          <td> Data 13</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script>
    function lockColumns(e) {
      let columnDataTable = window.document.getElementById("column-data-table");
      let columnDataRows = columnDataTable.rows;
      let colWidths = new Array(columnDataRows[0].children[0].length);

      for (var j = 0; j < columnDataRows.length; j++) {
        let currentCell = e.target.parentNode;
        let currentColInd = currentCell.dataset.columnIndex;

        for (let i = 0; i <= currentColInd; i++) {
          columnDataRows[j].children[i].style.position = "absolute";
          if (i > 0) {
            let prevColPosition = (i - 1);
            if (!colWidths[i]) {
              let prevColBoundingRect = columnDataRows[j].children[prevColPosition].getBoundingClientRect();
              colWidths[i] = prevColBoundingRect.x + prevColBoundingRect.width;
            }
            let prevColPos = colWidths[i];

            columnDataRows[j].children[i].style.left = prevColPos + "px";
          }
        }
      }
    }
  </script>
</body>


桌子{
边框顶部：1px实心；
右边框：1px实心；
左边框：1px实心；
边界塌陷：塌陷；
}
.数据表td{
边框顶部：1px实心；
背景颜色：灰色；
宽度：74px；
右边框：1px实心；
}
.数据表{
边框底部：1px实心；
表布局：固定；
}
.col标题{
宽度：74px；
}
.集装箱{
宽度：500px；
高度：100px；
溢出：滚动；
}
第1栏
锁
第2栏
锁
第3栏
锁
第4栏
锁
第5栏
锁
第6栏
锁
第7栏
锁
第8栏
锁
第9栏
锁
第10栏
锁
第11栏
锁
第12栏
锁
第13栏
锁
数据1
数据2
数据3
数据4
数据5
数据6
数据7
数据8
数据9
数据10
数据11
数据12
数据13
数据1
数据2
数据3
数据4
数据5
数据6
数据7
数据8
数据9
数据10
数据11
数据12
数据13
数据1
数据2
数据3
数据4
数据5
数据6
数据7
数据8
数据9
数据10
数据11
数据12
数据13
数据1
数据2
数据3
数据4
数据5
数据6
数据7
数据8
数据9
数据10
数据11
数据12
数据13
功能锁定列（e）{
让columnDataTable=window.document.getElementById（“列数据表”）；
让columnDataRows=columnDataTable.rows；
设colWidths=new数组（columnDataRows[0].children[0].length）；
对于（var j=0；j

您说您在父div上设置了z索引，但您是否也将其位置设置为静态以外的其他位置（即
位置：相对；
）？z-index只对定位元素有效。我认为，如果父元素不在文档流中，您将很难控制文档流中不存在的内容的溢出。但仍然不是你想要的。谢谢，这修复了重叠。然而，我的列锁定现在被破坏了。那是因为你的单元格是绝对位置的。。。您必须将它们更改为“已修复”。在我之前的评论中看到我的小提琴如果很难用position:absolute控制溢出，你能推荐一个替代方案吗？