Clarity Modal inside stackview overlaps UI elements

Question

I have a clarity modal, which is there under stack-block-content. When I open this modal it overlaps all other UI elements.

I tried setting z-index to very large number but still it did not work.

<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>

Can anyone please help get me out of there. Here is my stackblitz: https://stackblitz.com/edit/clarity-datagrid-basic-eruq88

In chrome developer tool, if I disable -webkit-mask-image property from stack-view it works well. But in my code, when I overwrite stack-view class it doesn't work.

Answer 1

You need to move your <clr-modal></clr-modal> div out so that it is under the <div class="main-container"></div> div. This will bring it out of the inner divs and overlay the modal on top of everything. Setting z-index on child elements will not work.