diff --git a/‎.changeset/dull-nights-invite.md‎
Lines changed: 5 additions & 0 deletions b/‎.changeset/dull-nights-invite.md‎
Lines changed: 5 additions & 0 deletions
diff --git a/‎packages/astro/components/Picture.astro‎
Lines changed: 5 additions & 5 deletions b/‎packages/astro/components/Picture.astro‎
Lines changed: 5 additions & 5 deletions
diff --git a/‎packages/astro/test/core-image-layout.test.ts‎
Lines changed: 15 additions & 0 deletions b/‎packages/astro/test/core-image-layout.test.ts‎
Lines changed: 15 additions & 0 deletions
diff --git a/‎packages/astro/test/fixtures/core-image-layout/src/pages/picture.astro‎
Lines changed: 8 additions & 0 deletions b/‎packages/astro/test/fixtures/core-image-layout/src/pages/picture.astro‎
Lines changed: 8 additions & 0 deletions
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes the `Picture` component to forward the `class` prop to the `<picture>` element in addition to the `<img>` element. This allows layout-affecting CSS properties like `z-index` to work correctly when the `Picture` component is used inside flex or grid containers.
@@ -38,13 +38,13 @@ if (props.alt === undefined || props.alt === null) {
 	throw new AstroError(AstroErrorData.ImageMissingAlt);
 }
 
-// Picture attribute inherit scoped styles from class and attributes
-const scopedStyleClass = props.class?.match(/\bastro-\w{8}\b/)?.[0];
-if (scopedStyleClass) {
+// Forward the user's class to <picture> so layout-affecting CSS (z-index, order, etc.)
+// applies to the flex/grid item. The class is also kept on <img> for visual styling.
+if (props.class) {
 	if (pictureAttributes.class) {
-		pictureAttributes.class = `${pictureAttributes.class} ${scopedStyleClass}`;
+		pictureAttributes.class = `${pictureAttributes.class} ${props.class}`;
 	} else {
-		pictureAttributes.class = scopedStyleClass;
+		pictureAttributes.class = props.class;
 	}
 }
 
 
@@ -270,6 +270,21 @@ describe('astro:image:layout', () => {
 					assert.ok($picture.attr('class')!.includes('picture-comp'));
 				});
 
+				it('forwards class to picture element', () => {
+					const $picture = $('#picture-class-forwarded picture');
+					assert.ok($picture.attr('class')!.includes('my-class'));
+					const $img = $('#picture-class-forwarded img');
+					assert.ok($img.attr('class')!.includes('my-class'));
+				});
+
+				it('merges class with pictureAttributes class on picture element', () => {
+					const $picture = $('#picture-class-merged picture');
+					assert.ok($picture.attr('class')!.includes('pic-class'));
+					assert.ok($picture.attr('class')!.includes('my-class'));
+					const $img = $('#picture-class-merged img');
+					assert.ok($img.attr('class')!.includes('my-class'));
+				});
+
 				it('adds data attributes instead of inline styles', () => {
 					const $img = $('#picture-attributes img');
 					// Should have data attributes for CSP compliance
 
@@ -50,6 +50,14 @@ import myImage from "../assets/penguin.jpg";
 	}}/>
 </div>
 
+<div id="picture-class-forwarded">
+  <Picture src={myImage} fallbackFormat="jpeg" alt="A penguin" class="my-class" />
+</div>
+
+<div id="picture-class-merged">
+  <Picture src={myImage} fallbackFormat="jpeg" alt="A penguin" class="my-class" pictureAttributes={{ class: 'pic-class' }} />
+</div>
+
 
 <style>
   .img-comp {
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'astro': patch
 +---
++
 +Fixes the `Picture` component to forward the `class` prop to the `<picture>` element in addition to the `<img>` element. This allows layout-affecting CSS properties like `z-index` to work correctly when the `Picture` component is used inside flex or grid containers.
Original file line number	Diff line number	Diff line change
`@@ -38,13 +38,13 @@ if (props.alt === undefined \|\| props.alt === null) {`
`38`	`38`	`throw new AstroError(AstroErrorData.ImageMissingAlt);`
`39`	`39`	`}`
`40`	`40`
`41`		`-// Picture attribute inherit scoped styles from class and attributes`
`42`		`-const scopedStyleClass = props.class?.match(/\bastro-\w{8}\b/)?.[0];`
`43`		`-if (scopedStyleClass) {`
	`41`	`+// Forward the user's class to <picture> so layout-affecting CSS (z-index, order, etc.)`
	`42`	`+// applies to the flex/grid item. The class is also kept on <img> for visual styling.`
	`43`	`+if (props.class) {`
`44`	`44`	`if (pictureAttributes.class) {`
`45`		- pictureAttributes.class = `${pictureAttributes.class} ${scopedStyleClass}`;
	`45`	+ pictureAttributes.class = `${pictureAttributes.class} ${props.class}`;
`46`	`46`	`} else {`
`47`		`- pictureAttributes.class = scopedStyleClass;`
	`47`	`+ pictureAttributes.class = props.class;`
`48`	`48`	`}`
`49`	`49`	`}`
`50`	`50`