我在為div編輯css時遇到了一個問題，這些div靠近或包含外部庫的組件。就像我寫的任何css都被這些外部包覆蓋了。

我在我的angular應用程序中使用core-ui和Taiga UI。

示例1:

我不能改變旋轉木馬的z索引。所有其他的div總是在傳送帶的下面，不管我把它們放在哪里或者改變z索引。

例如，我希望下面的第二個div位于第一個div之上:

<div class="min-h-[56em] z-0">
  <c-carousel [dark]="true">
    <c-carousel-indicators></c-carousel-indicators>
    <c-carousel-inner>
      <c-carousel-item *ngFor="let slide of slides">
        <img
          [src]="slide.src"
          alt="{{ slide.title }}"
          class="d-block w-100"
          loading="lazy"
        />
      </c-carousel-item>
    </c-carousel-inner>
    <c-carousel-control
      [routerLink]
      caption="Previous"
      direction="prev"
    ></c-carousel-control>
    <c-carousel-control
      [routerLink]
      caption="Next"
      direction="next"
    ></c-carousel-control>
  </c-carousel>
</div>

<div class="flex justify-center -mt-72 z-[1100]">
   Some other content I want to be on top of the above carousel
</div>

我試著編輯SCS，如下圖所示，但是沒有用，因為轉盤不在列表中。

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
...

示例2

這里分頁器沒有按照預期的方式定位

<div class="mx-10 mt-5 flex justify-center">
  <div class="w-11/12 lg:w-5/6">
    <tui-pagination
      [activePadding]="activePadding"
      [length]="64"
      [index]="0"
    ></tui-pagination>
  </div>
</div>

我已經嘗試給我的css優先權，如這里所描述的，仍然沒有結果。它像angular一樣在渲染時給組件優先權。

我該怎么做呢？我如何給我的css優先權？