Question

我使用了这个示例https://jsfiddle.net/wvypo83c/1/，除了弹出菜单外，它都能正常工作。在所有单元格上都有弹出菜单，因此我可以编辑值。第一列的弹出菜单出现在值的后面。我以为问题是z-index，所以我将面板的z-index从弹出菜单更改为一个更大的数字。但是现在在单元格中显示了弹出菜单，使单元格更大。

如何使弹出菜单面板显示在其他层而不是在单元格内部？

开发环境：

Angular CLI 6.1.1

弹出菜单bs-下拉

css：

.tbody th {
 position: sticky;
 left: 0;
 z-index: 1;
 border: 1px solid #CCD7E0;
 background-color: #FFFFFF;
}
.menu div
{
 position: relative;
 z-index:1000;
}

感谢您的帮助，路易斯

更多完整的HTML和CSS：

<tr *ngFor="let row of rows">
  <th class="properties2-th">

    <div class="d-inline-block" [style.margin-left.px]="row.left_margin">

    <ul class="topbar__nav main-nav properties2-menu">
      <li class="main-nav__item dropdown-container">
        <div dropdown (onShown)="row.menuState='shown'" (onHidden)="row.menuState='hidden'">
          <a class="main-nav__link" href="#" dropdownToggle (click)="false">
            <span class="property-name">{{row.name}}</span>
            <i class="icon main-nav__link-icon" [class.icon-angle-down]="row.menuState=='hidden'" [class.icon-angle-up]="row.menuState=='shown'"></i>
          </a>
          <div  class="dropdown dropdown-menu ">
            <ul class="dropdown-menu&#45;&#45;topbar main-nav">
              <li class="dropdown-menu__item">
                <a class="dropdown-menu__link" (click)="openKeyModal(keyContent, row, null, $event)" style="cursor: pointer">Add new sub key</a>
              </li><li class="dropdown-menu__item">
              <a class="dropdown-menu__link" (click)="openKeyModal(keyContent, row.parentKey, row, $event)" style="cursor: pointer">Edit the key</a>
            </li><li class="dropdown-menu__item">
              <a class="dropdown-menu__link" (click)="removeKey(row, $event)" style="cursor: pointer">Remove the key</a>
            </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>

    </div>

  </th>
  <!--- for the td popup-menu works well -->
  <td class="properties2-td" *ngFor="let environment of environments">

    <a *ngIf="!getValue(row, environment) && isLeaf(row)" class="nav-link" title="Add new value"
       (click)="openValModal(valContent, row, environment, $event)" href=""><span
      class="property-name">Add new value[+]</span></a>

    <div class="d-inline-block" *ngIf="getValue(row, environment)">
      <a *ngIf="isLeaf(row) && !getValue(row, environment).value" class="nav-link" title="Add new value"
         (click)="openValModal(valContent, row, environment, $event)" href=""><span
        class="property-name">Add new value[+]</span></a>

      <div class="d-inline-block" *ngIf="isLeaf(row) && getValue(row, environment).value">

        <ul class="topbar__nav main-nav">
          <li class="main-nav__item dropdown-container">
            <div dropdown (onShown)="getValue(row, environment).menuState='shown'" (onHidden)="getValue(row, environment).menuState='hidden'">
              <a class="main-nav__link " href="#" dropdownToggle (click)="false" title="{{getValue(row, environment).value}}">
              <span class="property-value">{{
      (getValue(row, environment).value.length > 30) ?
      (getValue(row, environment).value | slice:0:27) + '...' :
      (getValue(row, environment).value)
      }}</span>
                <i class="icon main-nav__link-icon" [class.icon-angle-down]="getValue(row, environment).menuState=='hidden'" [class.icon-angle-up]="getValue(row, environment).menuState=='shown'"></i>
              </a>
              <div  class="dropdown dropdown-menu">
                <ul class="dropdown-menu&#45;&#45;topbar main-nav">
                  <li class="dropdown-menu__item">
                    <a class="dropdown-menu__link" (click)="openValModal(valContent, row, environment, $event)" style="cursor: pointer">Edit the value</a>
                  </li><li class="dropdown-menu__item">
                  <a class="dropdown-menu__link" (click)="clearValue(getValue(row, environment), $event)" style="cursor: pointer">Clear the value</a>
                </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>

      </div>
    </div>

  </td>
</tr>



.properties2-table-div {
  max-width: 1024px;
  max-height: 768px;
  overflow: scroll;
  position: relative;
}

.properties2-table {
  position: relative;
  border-collapse: collapse;
}

.properties2-td, .properties2-th {
  padding: 0.25em;
  max-width: 400px;
  min-width: 300px;
  height: 50px;
}


.properties2-thead th {
  position: sticky;
  top: 0;
  box-sizing: border-box;
  border: 1px solid #CCD7E0;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F8FA 100%);
}

.properties2-thead th:first-child {
  left: 0;
  z-index: 10;
}

.properties2-tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  border: 1px solid #CCD7E0;
  background-color: #FFFFFF;
}

.properties2-menu div
{
  /*
  static the same effect as the sticky
  relative the same effect as the sticky
  fixed
  absolute
  sticky
  */
  position: relative;
  z-index:1000;
}

.properties2-tbody td {
  border: 1px solid #CCD7E0;
  background-color: #FFFFFF;
}

与以下角度冲突：在纯CSS上具有固定标题和固定列的表

0 个答案: