CSSで要素を上下入れ替える方法。[レシポンシブ対応]

要素を上下で入れ替える方法。レスポンシブにも対応。

CSSのpositioを使った要素の上下入れ替えってよくやりますよね？

にもかかわらずいつも忘れてしまうので、コードの理解と保存のために記しておきます。

やりたいこと

こんな状態をCSSでこうしたい。

これを行います。 

HTML

HTML_positionで要素の上下入れ替え（レスポンシブ）

CSS

CSS_positionで要素の上下入れ替え（レスポンシブ）

手順 

1. 全体を包むボックスを用意します。
   今回のコードだと<section>です。
   ここにposition:relativeを指定して、<section>内の左上をこのボックス内でのpositionの起点とします。
   
   また、同様の要素が続く場合は特に、marginで各要素との間隔を調整します。
   
   
2. 見出しと文章を含むボックスの用意をして、必要な要素を書き込みます。
3. <img＞を記述します。
4. css のpositionで入れ替えを設定する

入れ替えの理屈

下に移したい<div>にposition:absoluteを指定して、任意の場所に指定します。

今回は<div>を<img>の下に配置しました。

absoluteを使うと、後続の要素はabsoluteが指定された要素の高さ分詰まってきます。floating-Boxと考え方は同様です。

<div>に対して、positionをbottom:0;にすることで、imgの下に配置して、padding-topを%で指定することでボックスの高さが変わることに対応します。
配置したい位置次第でこの数値は変更します。
この<section>を複数使用する場合は、sectionに対してmarginを設定します。<div>内の<p>などの高さ次第では、メディアクエリで何段階か指定が必要になります。

残念なあとがき

そもそもこの上下入れ替えは「sectionやarticleタグの直下は見出しタグでなければならない」というvalidationエラーが出ていた為に行なっていました。

しかし、最近ではこのsectionやarticleの直後にimgが有ることに対してエラーを吐かない様なのです。いや、そもそもそんなエラーは存在しなかったのかもしれないんですが。

今回記事を書くにあたりテスト的に色々な並びでバリデータかけてみましたが、不要な様です。