という内容で僕の格闘日記をつけて行きます。
この課題をクリアするために結構webったんですが中々これだ！という物が出てきませんでした。
そもそも、このjQueryで読み込み時に取得して指定するのが定番なのでしょうか…

今回の課題
position relative で要素と要素を複数重ねた要素に高さを持たせたい

駆け出しwebクリエイターあるある【見た目が単調】

左がposition:relative,absoluteを使った少しデザインの効いた物
右はブロックを重ねていない物
ブロックとブロックを重ねて１つのブロックにすると玄人感出ませんか？笑

そこで最近は、ブロックとブロックを重ねる【position:relative】(ここでは複合ブロックと呼ぼう)を頻発させたい訳です。

ただここで課題にぶつかるのが、今回の問題なんです！！！

左）今回の現象※分かりやすいように問題の複合のブロックに背景色redをつけいています。
右）イメージこんな感じで複合ブロックが重なってしまっているんです。

ブロック(absolute)とブロック(absolute)を重ねた複数ブロックの入った複合ブロック(relative)が被ってしまう…
よく見るとこの複合ブロックが高さを持っていないではないか！
webで調べてみるとposition absoluteした要素は浮いてる状態？のためrelativeの高さ(height)にはならないとかなんとか…
なので複合ブロック(relative)に高さを持たせないと次のブロックと重なってしまうそうです。

なるほど…

じゃあ高さ(height)指定すれば良いのね！

って高さ指定してみた…

レスポンシブデザイン(@media screen 482px)だったら高さ切り替えで上手くいく。※画像

けど、リキッドデザイン？たとえば408px時だったら要素同士が被ってしまうという問題に直面
画像では、要素同士が開きすぎる。

高さを『px』ではなく『%』や『vw』とかで指定してみるも上手くいかない…

ってなった時に、こいつに出会う！

jQuery heightメソッドとcssメソッドの組み合わせ

$(function(){
  h1 = $(".stack-wrapper").children("h2").height();
  h2 = $(".stack-wrapper").children("img").height();
  h3 = $(".stack-wrapper").children("div").height();
  h = h1 + h2 + h3;
  $(".stack-wrapper").css("height", h + "px");
});

やっていることとしてはjQueryでhtml読み込み時イベントにて
要素のheightを取得
その取得したheightをcssメソッドで付与

おぉ！！！！！！(感動🥹)

なんかいい感じ！
この一山攻略した感が毎度快感ですよね…(動画制作等含めて)

ただ、たまに読み込み時のheightが上手く機能しないことがある…
なぜ？？？？？

メソッドの基本の読み込み(HTML読み込み完了後)ではなく、画像まで全て読み込み後にメソッドを読み込ませる方法にしたら良かったのか。

あと、iPadとかで横向ディスプレイから縦向きディスプレイにしたらデザインが崩れる(要素が被る)ことになる。
resizeメソッドとか使えば解決しそう…

ということで、こんな感じに書き換えてみたら、上手くいった！

$(window).on('load',function() {
  h1 = $(".stack-wrapper").children("h2").height();
  h2 = $(".stack-wrapper").children("img").height();
  h3 = $(".stack-wrapper").children("div").height();
  h = h1 + h2 + h3;
  $(".stack-wrapper").css("height", h + "px");
});

$(window).on('load',function(){
  h4 = $(".item-stack-wrapper").children("h2").height();
  h5 = $(".item-stack-wrapper").children("img").height();
  h6 = $(".item-stack-wrapper").children("div").height();
  itemh = h4 + h5 + h6;
  $(".item-stack-wrapper").css("height", itemh + "px");
});

$(window).resize(function() {
  h1 = $(".stack-wrapper").children("h2").height();
  h2 = $(".stack-wrapper").children("img").height();
  h3 = $(".stack-wrapper").children("div").height();
  h = h1 + h2 + h3;
  $(".stack-wrapper").css("height", h + "px");
});

$(window).resize(function(){
  h4 = $(".item-stack-wrapper").children("h2").height();
  h5 = $(".item-stack-wrapper").children("img").height();
  h6 = $(".item-stack-wrapper").children("div").height();
  itemh = h4 + h5 + h6;
  $(".item-stack-wrapper").css("height", itemh + "px");
});

参考記事

まぁとりあえず、今回はこれで満足しているのでこれでこれで公開にしました。

いい感じに機能してるので、実際のページもご覧になってみてください！

実際のページへ