こんにちは。ばーんです。

サイト作成中に
###「要素を思い通りの位置に配置できない！」
となった際のポイントを纏めています。
（実際に自分が克服した方法）

今回作成したい完成図がこちら↓

実際に作成するとわかるのですが、要素が細かくあるため、テキトーに配置していくと、後で大惨事になります…

今回苦戦したのが↓の③「Profile」[Work]ボタンです。

divでボタンを作って…
で配置すると↓こうなりました。

そうだ、そうだ！inline-blockにしないと
でdisplay指定すると…

####なんでfloatもしてないのに、回り込むの(ToT)

ここで四苦八苦します（変なスタイルあたってないか検証見たりしてもダメ）。
position:relativeで無理やり動かすと、レスポンシブ対応ができない…

相当時間を費やした後、冷静になります。

#今の要素を書き出してみよう。

実際はこんな感じです↓

ここで正解にたどり着きました。
親要素がないので（一番大枠のdivが親要素になってるので）、
横並びになってました！

なので、↑の写真で言うと❷と❸を括った親要素が必要だった！
ということですね。

というわけで、配置に困った時のポイントは、
#「今の要素を書き出してみる」
でした。

最後まで見て頂いてありがとうございましたm_ _m
[cv:issue_marketplace_engineer]