css - stackview 中的 Clarity Modal 与 UI 元素重叠

Question

我有一个清晰度模式，它位于堆栈 block 内容下。当我打开此模态时，它与所有其他 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>

谁能帮我离开那里。这是我的 stackblitz:https://stackblitz.com/edit/clarity-datagrid-basic-eruq88

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

Answer 1

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