Claude Opus 5.5でヘッダーに隠れる商品メニューを修正する

z-index: 9999の商品メニューでも、ヘッダーの背後に隠れることがあります。Claude Opus 5.5には祖先要素のスタイルと重なる要素を渡し、修正案より先に重ね合わせの境界を特定させます。子の数値を上げても、親の重ね合わせコンテキストからは抜け出せません。

似た症状を切り分ける

2013年のコミュニティ質問は、どのプロパティがコンテキストを作るかを尋ねています。現在の規則はMDNのガイドで確認します。変形、1未満の不透明度、特定の配置とz-indexの組み合わせなどが該当します。position: relativeだけで常に新しいコンテキストができるわけではありません。

二つの親で考える

配置済みカードのz-indexが1、兄弟ヘッダーが2、カード内メニューが9999とします。説明用の経路[1, 9999]と[2]では、最初の境界でヘッダーが上になります。9999を999999にしても比較結果は変わりません。ローカルの数値例で確認したのはこの単純な順序だけです。完全なCSS描画アルゴリズムのブラウザー実装でも、Opusによる修正実測でもありません。

まずカードに独立コンテキストが必要か判断します。不要な原因を除く場合も、視覚効果とレイアウトを確認します。メニューが境界を越える必要があるなら、適切な共通レイヤーへの配置を検討します。PortalはDOM位置を変えるだけで、座標、切り抜き、イベント、フォーカスを自動修正しません。トリガーのアクセシブル名を維持し、移動後に開閉とキーボード操作を再検証します。

証拠から始める修正プロンプト

商品メニュー、トリガー、文書ルートまでの全祖先、重なるヘッダーを調べてください。DOM、計算済みposition/z-index/transform/opacity/overflow、境界矩形を渡します。
重ね合わせ、切り抜き、包含ブロックの問題を分離してください。最初の関連境界を特定し、実際の祖先チェーンで修正を説明してください。全z-indexを上げたり、全変形を削除したりしないでください。
レイアウト、アニメーション、アクセシブル名を保つ最小パッチを返してください。浮動要素を移すなら、座標更新、スクロール、イベント、フォーカス復帰を指定してください。狭い画面と広い画面、ズーム、スクロール、キーボード開閉、再マウントを試験してください。未実行は保留とし、証拠なしにブラウザー修正成功を宣言しないでください。

これは公式Opusプロンプトガイドを参照した提案フローで、実施済みのモデル評価ではありません。

問題の境界で合格を判断する

修正前後で同じメニュー状態を撮影します。目的のメニューが見え、他の内容の順序が保たれ、スクロール中も位置が合うことを確認します。層の比較が通っても切り抜きは別に確認します。ブラウザー、表示幅、実際のキーボード結果を記録します。

**全浮動要素に最大値を使うべきですか？** いいえ、数値は所属コンテキスト内で意味を持ちます。**bodyへ移せば必ず直りますか？** いいえ、配置と操作の試験が必要です。モーダル動作には別のダイアログフォーカスガイドがあります。

商品表示を整えたら、Panelly Studioで関連キャンペーン画像を作れます。PanellyへのOpus統合やCSS自動修復を示すものではありません。

情報源と参考文献

• 一次資料 · stackoverflow.com
• 一次資料 · developer.mozilla.org
• 一次資料 · platform.claude.com