Question

我试图在每行的单元格上设置z索引/覆盖div，这对图标点击具有可扩展的作用。

这里的问题是它（图标）扩展了列，即使我给出z-index来代替它覆盖其他（左侧）列。期望这里不应该扩大列宽，而应该覆盖每个图标的左侧。

Here是StackBlitz，用于扩展列。

Answer 1

您需要的功能可以使用css position属性来实现。

我们可以将符号包装在具有css position:absolute的div中，而具有类button-row的父div可以具有css position:relative。

如上所述，我已经更新了您的stackblitz演示。 https://stackblitz.com/edit/stackoverflow-56936645

您的模板如下所示：

<ng-container matColumnDef="symbol">
  <th mat-header-cell *matHeaderCellDef> Symbol</th>
  <td mat-cell *matCellDef="let element; let i = index">
    <!--.button-row starts, it is a parent row with position relative-->
    <div class="button-row" style="">
      <!--.float-button-container starts,  it is a wrapper div with position:absolute-->
      <div class="float-button-container" [class.active]="showFloatingButtons[i] == true">
        <mat-icon mat-fab color="primary" class="floating-buttons">offline_pin
        </mat-icon>
        <mat-icon mat-fab color="primary" class="floating-buttons">query_builder
        </mat-icon>
        <mat-icon mat-fab color="primary" class="floating-buttons" disabled>restore
        </mat-icon>
        <mat-icon mat-fab color="primary" class="floating-buttons">
          play_circle_filled
        </mat-icon>
      </div>
      <!--.float-button-container ends-->
      <mat-icon (click)="toggleFloat(i)" class="sky_blue">more_horiz</mat-icon>
    </div>
    <!--.button-row ends-->
  </td>
</ng-container>

您的样式将如下所示：

.button-row {
  position: relative;
}

.float-button-container {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  background-color: #ffffff;
  width: 0px;
  transition: width 150ms ease-in-out;
  overflow: hidden;
}

.float-button-container.active {
  width: 100px;
  transition: width 150ms ease-in-out;
}

您的问题几乎类似于创建一个在左侧打开的下拉菜单。在此处阅读有关使用CSS制作下拉菜单的更多信息：https://www.w3schools.com/css/css_dropdowns.asp

我希望这会有所帮助。

Answer 2

这与z-index无关。如果您希望列具有设定的宽度，请将其width CSS属性设置为固定值！

Answer 3

可以通过创建一个css类并将其添加到mat-icon中的第一个ng-container中来解决此问题。

您可以使用的css类是：

    .fb1
    {
       margin-left:-6rem;
       margin-top:.3rem;
    }

您应该将其添加到此元素。

<ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element; let i = index">
        <div [ngClass]="showFloatingButtons[i] == true ? 'floating-pane-active' : 
'floating-pane-deactive'" class="button-row" style="">        

<!--Css Class fb1 added below-->
            <mat-icon mat-fab *ngIf="showFloatingButtons[i]== true" color="primary" 
class="floating-buttons fb1">offline_pin
            </mat-icon>
<!--Css Class fb1 added above-->

            <mat-icon mat-fab *ngIf="showFloatingButtons[i] == true" color="primary" class="floating-buttons fb2">query_builder
            </mat-icon>
            <mat-icon mat-fab *ngIf="showFloatingButtons[i] == true" color="primary" class="floating-buttons " disabled>restore
            </mat-icon>
            <mat-icon mat-fab *ngIf="showFloatingButtons[i] == true" color="primary" class="floating-buttons ">
                play_circle_filled</mat-icon>
            <mat-icon (click)="toggleFloat(i)" class="sky_blue">more_horiz</mat-icon>
        </div>
    </td>
</ng-container>

请注意，文本将在较小的屏幕尺寸上开始重叠，因此当您在较小的屏幕尺寸上单击按钮时，您可能希望使用Javascript隐藏“重量”列的文本和/或进一步将符号列重新定位。

在表单元格div上为角材料中的每一行设置z索引

3 个答案: