stackview中的Clarity Modal与UI元素重叠

Question

我有一个清晰模式，它位于堆栈块内容下。 当我打开此模式时，它会与所有其他 UI 元素重叠。

我尝试将 z-index 设置为非常大的数字，但仍然无效。

<dt class="stack-block-label">Label 2</dt>
    <dd class="stack-block-content">
      <button class="btn btn-sm" (click)="basic=true">Click This</button>

      <clr-modal [(clrModalOpen)]="basic">
          <h3 class="modal-title">I have a nice title</h3>
          <div class="modal-body">
              <p>But not much to say...</p>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-outline" (click)="basic = false">Cancel</button>
              <button type="button" class="btn btn-primary" (click)="basic = false">Ok</button>
          </div>
      </clr-modal>
    </dd>
    <div class="stack-children">
        <div class="stack-block">
            <dt class="stack-block-label">Sub-label 1</dt>
            <dd class="stack-block-content">Sub-content 1</dd></dt>

任何人都可以帮助我离开那里。 这是我的堆栈闪电战：https://stackblitz.com/edit/clarity-datagrid-basic-eruq88

在 chrome 开发者工具中，如果我从 stack-view 禁用 -webkit-mask-image 属性，它工作得很好。但是在我的代码中，当我覆盖堆栈视图类时它不起作用。

Answer 1

您需要将<clr-modal></clr-modal> div 移出，使其位于<div class="main-container"></div> div 下。这会将它带出内部 div 并将模态覆盖在所有内容之上。在子元素上设置z-index 将不起作用。