Flex 要素と 3 つの子要素があります。 2 番目の子は、次のように絶対位置を使用して最初の子と重なる必要があります:
＃＃＃＃＃＃期待される：＃＃＃＃＃＃2 番目の子は最初の子の隣ではなく 上にある必要があることに注意してください。
ただし、親にdisplay: flex を設定すると、絶対要素のアンカーポイントまたは参照ポイントが div の先頭に移動するようです。実際の結果は次のとおりです: ＃＃＃＃＃＃実績：＃＃＃＃＃＃
2 番目の子要素を 1 番目または 3 番目の要素内に置くことは、overflow:scroll があるため、オプションではありません。私のレイアウトは display: flex
display プロパティを使用する場合も同様です。これらの解決策が他の投稿で提案されていることは知っていますが、これらの制限に対処する質問/回答は見つかりませんでした。
2 番目の子でdisplay:absolute 以外のものを使用することもできます (負のマージンなど)。しかし、私もそれを機能させることができません。
これが可能かどうか知っている人、または何か提案がある場合は、大変感謝します。
実際の動作を確認するために、問題を示すために簡略化した私のコードを次に示します。
P粉4269063692024-03-30 21:42:53
position:relative; を親に追加します要素に position:absolute; 属性が指定されている場合、その要素は relative、absolute、または fixed によってターゲットになります。配置 最も近い親要素が配置されます。見つからない場合は、body がターゲットになります。この場合、絶対位置決めの参照点となるため、position:relative; を .wrapper 要素に追加するとよいでしょう。
定義により、position:absolute; 要素は、特定の値セット を使用して絶対に 配置されます。つまり、上端、右端、下端、左端からの距離です。値を何も指定しないと、値は左上隅に固定されるだけです。これがここで起こっていることです。
position:absolute; 通常のコンテンツ フローから要素を取得します。つまり、周囲の要素はそのサイズや位置に影響を与えないため、絶対 の位置になります。画像に示す効果を実現するには、.c 要素の幅を指定し、同じ正確な値を使用して .b 要素を右端から配置する必要があります。
参考として、以下のコード スニペットを参照してください。
P粉4516148342024-03-30 20:39:34
これはドキュメントの flow から取り出されているため、div の左側に表示されます。実際、実際には親ラッパーではなくビューポートを基準にして配置されます。ラッパーに配置するには、position:relative をラッパー クラスに設定して、new 包含ブロック
div 'a' の末尾と確実に重なるように、'right' プロパティを使用して、設定した値 カスタム プロパティ に設定した値だけ右端を左に移動しました。そのプロパティと div 'c'。以下の注釈付きの例を参照してください。