CSS - アンカーポイントの移動 表示:フレックスおよび位置:絶対

Question

Flex 要素と 3 つの子要素があります。 2 番目の子は、次のように絶対位置を使用して最初の子と重なる必要があります:

＃＃＃＃＃＃期待される：＃＃＃＃＃＃

2 番目の子は最初の子の隣ではなく 上にある必要があることに注意してください。

ただし、親に

display: flex を設定すると、絶対要素のアンカーポイントまたは参照ポイントが div の先頭に移動するようです。実際の結果は次のとおりです: ＃＃＃＃＃＃実績：＃＃＃＃＃＃

2 番目の子要素を 1 番目または 3 番目の要素内に置くことは、

overflow:scroll があるため、オプションではありません。私のレイアウトは display: flex

に依存しているため、親の他の

display プロパティを使用する場合も同様です。これらの解決策が他の投稿で提案されていることは知っていますが、これらの制限に対処する質問/回答は見つかりませんでした。

2 番目の子で

display:absolute 以外のものを使用することもできます (負のマージンなど)。しかし、私もそれを機能させることができません。 これが可能かどうか知っている人、または何か提案がある場合は、大変感謝します。 実際の動作を確認するために、問題を示すために簡略化した私のコードを次に示します。

リーリー リーリー

Answer 1

position:relative; を親に追加します

要素に position:absolute; 属性が指定されている場合、その要素は relative、absolute、または fixed によってターゲットになります。配置 最も近い親要素が配置されます。見つからない場合は、body がターゲットになります。この場合、絶対位置決めの参照点となるため、position:relative; を .wrapper 要素に追加するとよいでしょう。

位置決め値を要素に追加します

定義により、position:absolute; 要素は、特定の値セット を使用して絶対に 配置されます。つまり、上端、右端、下端、左端からの距離です。値を何も指定しないと、値は左上隅に固定されるだけです。これがここで起こっていることです。

位置決め値を設定する必要があります

position:absolute; 通常のコンテンツ フローから要素を取得します。つまり、周囲の要素はそのサイズや位置に影響を与えないため、絶対 の位置になります。画像に示す効果を実現するには、.c 要素の幅を指定し、同じ正確な値を使用して .b 要素を右端から配置する必要があります。

参考として、以下のコード スニペットを参照してください。

リーリー リーリー

Answer 2

これはドキュメントの flow から取り出されているため、div の左側に表示されます。実際、実際には親ラッパーではなくビューポートを基準にして配置されます。ラッパーに配置するには、position:relative をラッパー クラスに設定して、new 包含ブロック

を作成します。

div 'a' の末尾と確実に重なるように、'right' プロパティを使用して、設定した値 カスタム プロパティ に設定した値だけ右端を左に移動しました。そのプロパティと div 'c'。以下の注釈付きの例を参照してください。

リーリー リーリー