ion-icon внутри интерактивной ионной карты не работает с float: right

Question

У меня есть список ion-card, которые можно нажимать с помощью набора значков, которые появляются при наведении на него курсора. Моя проблема в том, что плавающая природа значков означает, что они на самом деле не там, где они выглядят (как показано на рисунке ниже), и поэтому щелчок ion-card скрывает это. Я уже знаю, что мне нужно $event.stopPropagation() там, но это не исправляет.

Мой вопрос: как я мог нажимать ion-icons, но не нарушать положение любых других элементов в процесс?

Заранее спасибо

HTML

<ion-card *ngFor='let packet of packets; let i = index' (click)='mobile? presentActionSheet(packet): navToPacket(packet)'>
  <div id='card-icons'>
    <ion-icon (click)='editMeta(packet); $event.stopPropagation()' name="create-outline"></ion-icon>
    <ion-icon (click)='nav(["packet", packet.meta.computer.id, "stats"]); $event.stopPropagation()'
      name="bar-chart-outline">
    </ion-icon>
    <ion-icon (click)='presentMoreActionSheet(packet)' name="ellipsis-vertical"></ion-icon>
  </div>

  <ion-card-header>
    <ion-card-subtitle>Awesome Subtitle</ion-card-subtitle>
    <ion-card-title>Awesome Title</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    Awesome content
  </ion-card-content>
</ion-card>

CSS

#card-icons {
  ion-icon {
    font-size: 30px;
    padding: 10px 5px;
  }
  visibility: hidden;
  float: right;
}
ion-card:hover #card-icons {
  visibility: visible;
}

Answer 1

Свойство pointer-events CSS устанавливает, при каких обстоятельствах (если есть) конкретный элемент graphi c может стать целью событий указателя.

В дополнение к указанию на то, что элемент не является целью событий указателя, значение none инструктирует событие указателя go «пройти» по элементу и назначить все, что находится «под» этим элементом вместо .

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: all;

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

• https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events