css h1とimgなどHTML要素の表示位置を上下で入れ替える方法はposition

処理方法

HTMLで構築をしていると、

・h1タグ
・imgタグ

というように、見出し＞中身の順で、マークアップの順番をしっかり並べたくなります。

ただ、デザイン側からは、

・写真
・見出しテキスト

といった順番のレイアウトで指示されることも少なくありません。

とくにニュースサイトなど、「サムネイル画像＋タイトル」の要素があると、写真が上側に来ることも珍しくありません。

こんな時は、positionを使いましょう。やり方はいくつもありますが、

div⇒relative
h1⇒absolute
img⇒absolute

という感じで絶対位置を示してやれば、HTMLの順番はそのままにしながら、レイアウトは上下を逆に入れ替えてあげることができます。

参考リンク

コードの具体例など、詳しくは下記リンクがとても参考になります。

ただ、上下入れ替えのcssをリキッドレイアウト（可変グリッド）などでやろうとすると、要素の高さ部分の調整で難しくなることがあります。たとえばテキストのボリューム次第で要素の高さが変わってしまうからです。

この場合、高さを固定にしても良いんですが、そうすると今度は余白が目立ったり、逆にギュウギュウになったりして、けっこう難しいです。可変タイプのサイトを作る際は、あまりpositionに頼らない方が良いでしょう。（レイアウトにこだわる際はテキストのことも考えてあげる必要があります。）

最後の手段は、js、j-queryですが、本来はcssで処理できるレベルのことを、あんまり動的に処理したくはないですよね・・・。

今はflexなどで色々と自由度が上がりました

昔はpositionくらいしか方法がなかったですが、古いブラウザが廃止になり、css3になり、flexが普及してきたので、今はもっと簡単に実現できるようになっています。