How to position an image in the upper right corner of a PrimeNG p-card without affecting the...

I'm using Angular with PrimeNG to build an interface, and I'm facing a problem when trying to position an image in the top right corner of each p-card, the image should not interfere with the content of the card, but should appear in its upper right corner relative to each card, just like a watermark.

my code

<ng-template pTemplate="list" let-products>

<div class="flex flex-row flex-wrap gap-2">

<div class="flex" *ngFor="let item of products">

<p-card [style]="{ width: '320px'}">
<ng-template pTemplate="header">
<!-- seal watermark -->
<img src="assets/award_seal.svg" height="60" width="60" class="award-seal"
style="position: absolute; top: 10px; right: 10px; z-index: 1;" />

<div class="p-5 pb-0 flex flex-row w-full">
<div class="flex-1 flex justify-content-center align-items-center flex-column">
<p-image width="auto" height="140" [src]="getMedia(item.idMedia)" alt="Image"
[preview]="true" />
</div>
</div>
</ng-template>
<div>
</div>
</p-card>
</div>
</div>
</ng-template>


By using position: absolute on the image, the image is positioned relative to the window instead of the p-card, which makes all images appear to be fixed to position on the screen instead of the card. I've tried adding position: relative to the card container, but it does'nt work

Continue reading...