docs(skill): add positioning CSS for badge overlay in Avatar & Badge snippet

Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/9bd2aa21-2829-486f-819c-7db526672ea8

Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>

Author: Copilot

skills/igniteui-angular-components/references/data-display.md

@@ -136,7 +136,7 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 ```html
 <!-- Image avatar with badge overlay -->
-<div class="wrapper">
+<div class="avatar-badge-container">
   <igx-avatar [src]="user.photo" shape="circle" size="large"></igx-avatar>
   <igx-badge [type]="'success'" [icon]="'check'"></igx-badge>
 </div>
@@ -151,6 +151,21 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 <igx-badge [type]="'error'" [value]="unreadCount"></igx-badge>
 ```
 
+```scss
+// Required styles to position the badge as an overlay on the avatar
+.avatar-badge-container {
+  position: relative;
+  display: inline-flex;
+
+  igx-badge {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    transform: translate(25%, 25%);
+  }
+}
+```
+
 Avatar shapes: `'circle'`, `'rounded'`, `'square'`. Sizes: `'small'`, `'medium'`, `'large'`, or custom CSS.
 Badge types: `'default'`, `'info'`, `'success'`, `'warning'`, `'error'`.