灌注：添加p-selectButton后绝对位置不起作用

Question

我是primeng的新手，我有这个html代码

<div class="main wheel">
    <div class="wheel-part use">
       <img src="./assets/images/svg/path-use.svg">
       <span class="wheel-part-title">USE</span>
    </div>
</div>

和CSS：

.wheel {
    height: 37.5vh;
    width: 39vh;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: #008800;
  }

  .wheel .use {
    position: absolute;
    top: 20px;
    right: 0;
    background-color: red;
  }

这是输出：

我的问题是，在我的html中添加 p-selectButton 时，绝对位置不再起作用，我不知道为什么。

添加 p-selectButton 之后的html代码：

<div class="main wheel">
   <p-selectButton [options]="wheelParts" multiple="multiple" >
      <ng-template let-wheelPart let-i="index" pTemplate="item">
         <div class="wheel-part use">
            <img src="./assets/images/svg/path-use.svg">
            <span class="wheel-part-title">USE</span>
         </div>
      </ng-template>
   </p-selectButton>
</div> 

添加 p-selectButton 后的结果：

请参见StackBlitz

Answer 1

通过将 <div class="wheel-part use">添加到您的primeNg元素内部，无法以相同的方式访问该类。要立即使用，必须使用:host ::ng-deep

stackblitz似乎已经过时，因此我无法尝试告诉您确切的语法，但可以尝试类似

  :host ::ng-deep .use {
    position: absolute;
    top: 20px;
    right: 0;
    background-color: red;
  }