CSSで要素を上下入れ替える方法。[レシポンシブ対応]
要素を上下で入れ替える方法。レスポンシブにも対応。
CSSのpositioを使った要素の上下入れ替えってよくやりますよね?
にもかかわらずいつも忘れてしまうので、コードの理解と保存のために記しておきます。
やりたいこと
こんな状態をCSSでこうしたい。
これを行います。
HTML
HTML_positionで要素の上下入れ替え(レスポンシブ)
CSS
CSS_positionで要素の上下入れ替え(レスポンシブ)
手順
- 全体を包むボックスを用意します。
今回のコードだと<section>です。
ここにposition:relativeを指定して、<section>内の左上をこのボックス内でのpositionの起点とします。
また、同様の要素が続く場合は特に、marginで各要素との間隔を調整します。 - 見出しと文章を含むボックスの用意をして、必要な要素を書き込みます。
- <img>を記述します。
- 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が有ることに対してエラーを吐かない様なのです。いや、そもそもそんなエラーは存在しなかったのかもしれないんですが。
今回記事を書くにあたりテスト的に色々な並びでバリデータかけてみましたが、不要な様です。