Question

小提琴解释了这个问题。我里面有一个可滚动的表和一个上下文菜单，但是有了overflow-x：auto，此“上下文菜单”就不再可见。

table {
  overflow: auto;
  width: 100%;
  display: block;
}

.absoluteElement {
  position: absolute;
}

<h2>ABSOLUTE Position Problem</h2>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th>Column 9</th>
      <th>Column 10</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="position: absolute">
        <div class="absoluteElement">
          Content will scroll with the bar
        </div>
      </td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/ohwy3z6L/16/

如何在表格上滚动并保持上下文菜单显示？

Answer 1

我不确定我是否正确理解了您的问题，但这是我已经设法完成的工作，说出什么地方出了问题，我会尝试解决。

tr {
  overflow: auto;
  width: 100%;
}

.relativeElement {
  position: relative;
  /* Imagine a dropdown/context menu on the grid here */
  top: 10px;
  left: 15px;
}

.absoluteElement {
  position: absolute;
  /* Imagine a dropdowncontext menu on the grid here */
  top: 10px;
  left: 15px;
}

<h2>RELATIVE Position Problem</h2>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th>Column 9</th>
      <th>Column 10</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="relativeElement">
          Content will cut here
        </div>
      </td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

<h2>ABSOLUTE Position Problem</h2>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th>Column 9</th>
      <th>Column 10</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="position: relative">
        <div class="absoluteElement">
          Content will scroll with the bar
        </div>
      </td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

带有溢出表自动隐藏绝对位置的内容

1 个答案: