position：親要素に対して固定の位置を設定する方法

Position How Position Fixed Relative Parent Element

プロジェクトで問題が発生しました。プロジェクトには弾丸フレームがあり、弾丸フレームにはアンカーコンポーネントがあります。弾丸フレームの内容はスクロールでき、アンカーコンポーネントは弾丸フレームに対して固定する必要があります。 position：fixedはブラウザウィンドウに対して固定されていますが、ポップアップの幅は固定されており、ブラウザウィンドウの幅は不確実であるため、ブラウザウィンドウに対する配置は確実に機能しません。弾丸フレームに対してアンカーコンポーネントを固定するにはどうすればよいですか？

情報を確認したところ、position：fixedはブラウザウィンドウに配置されていますが、fixed要素の上下左右が設定されていない限り、要素は親要素に対して相対的に配置されていることがわかりました。要素の位置を移動したい場合は、マージンを介してそれを達成することができます。

さらに、固定ポジショニング要素は実際には親要素の影響を受けるため、「固定ポジショニングは固定されていません」という結果になります。

1. 固定要素は常にビューポートを基準にして配置されるとは限らないため、親要素は変換されます。つまり、平行移動や回転などのtransfrom属性が変更され、固定位置の子要素に影響します。例：固定位置は固定されていません。

   
   
   

2. 親要素のz-indexが同じレベルよりも低い場合、固定z-indexが親よりも高くても、親によってブロックされます。

したがって、position：fixed要素をウィンドウに配置する場合は、bodyrootタグの下に配置するのが最適です。