css positionについて詳しく知りたいです

Question

こちらのpositionでrelativeにすると、テキストの場所を動かすことが可能と思うのですが、
いまいちどこを基準に動いているのかがわかりません。
真ん中から＋ーで動いているのでしょうか？
どなたかよろしくお願いいたします。

Comments

[maisumakun]

・ソースコードは画像ではなく、文字で提示してください。
・HTMLがどのようになっているかも重要です（position:relativeは、HTMLの状況にも依存しえます）。

[maisumakun]

何か確認した文書はありますか？

[skys215]

BFC(Block Formatting Context)かな？

Answer 1

こちらのpositionでrelativeにすると、テキストの場所を動かすことが可能と思うのですが、

いまいちどこを基準に動いているのかがわかりません。

「こちら」とはスクリーンショットでカーソルの当たっている#products2のことですよね？　これにposition:relativeを指定してtopなどで動かすということでいいですか？

相対配置（relative）時の位置指定は、自分自身の位置が基準になっています。

要素は文書の通常のフローに従って配置され、 top, right, bottom, left の値に基づいて自分自身からの相対オフセットで配置されます。

position - CSS: カスケーディングスタイルシート | MDN