我有一个清晰度模式,它位于堆栈 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 类时它不起作用。
最佳答案
您需要移动您的 <clr-modal></clr-modal>
div 出来,使其在 <div class="main-container"></div>
下分区这会将它带出内部 div 并将模式覆盖在所有内容之上。设置z-index
在子元素上将不起作用。
关于css - stackview 中的 Clarity Modal 与 UI 元素重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54254703/