transform:translateY(-360px);と上にあげた分、サイト下部があいてしまった時

Question

transform:translateY(-360px);
と上にあげた分、サイト下部があいた場合（空白）
サイト下部の空白分を消す方法はありますでしょうか？

そもそも、topの背景画像（レモンジュースの画像）に「朝食にフルーツたっぷりヨーグルト」と書かれた赤枠全体を被せたいときに
transform:translateY(-360px);
で被せるのはよくないやり方なのでしょうか。

Answer 1

transform は対象要素のみ移動させて他のレイアウトには影響を与えないという仕様なので、今回の要件には相応しくないですね。

HTMLが提示されていないので推測ですが、ネガティブマージンで重ねるのが簡単ではないかと思います。

<div class="top"></div>
<div class="box"></div>
<div class="contents">Next Contents</div>

.top {
  background-color: lemonchiffon;
  height: 300px;
}
.box {
  width: 300px;
  height: 200px;
  border: 2px solid red;
  margin: -100px auto 0; /* margin-top:-100pxで上に移動 */
/*  transform:translateY(-100px); */
}

Comments

[web_hoshi]

ありがとうございます!!
ネガティブマージンで設定したところ、サイト下部に空白なく、
当初の重ねたデザインを再現することができました！
transformの仕様やネガティブマージンの存在もよくわかっていなかったので
非常に助かりました。ありがとうございました...!!