1カラム縦並びレイアウト時のずらし方
1カラムで縦積みされているボックスを上下左右にずらす場合は、ネガティブマージン（負の値を持つmargin）を使うのが一番手軽な方法。特に上下方向へのずらしがある場合、ネガティブマージンであればずらしたボックスに続く後続ボックスの位置も自動的に追随するため、縦積みで並ぶ状態に影響を与えない。
@media screen and (max-width: 767px) {
.alternate__body {
margin-top: -40px; /* テキストボックスを上に40pxずらす */
padding-top: 60px; /* 重なり分の上余白を確保 */
}
/*左右交互に横にずらす*/
.alternate._normal .alternate__thumb {
margin-left: -20px;
}
.alternate._normal .alternate__body {
margin-right: -20px;
}
.alternate._reverse .alternate__thumb{
margin-right: -20px;
}
.alternate._reverse .alternate__body{
margin-left: -20px;
}
}2カラム横並びレイアウト時のずらし方
ネガティブマージンは、自身のボックスを外側に引き伸ばし、同時に隣接するボックスをひっぱるような挙動が発生する。
上下方向のずらしは、自身の位置だけを本来の配置場所からずらして配置することができる「position: relative」を使う。ネガティブマージンと違って自身のサイズが引き伸ばされることはないので、単純にそのまま下にずらすことができる。
次に左右方向については、本来画像ボックス：テキストボックスは1：1だが、テキストボックスが80px分だけ伸びで画像ボックスに重なった状態となっている。そのためテキストボックスのwidthは50%ではなく、50%＋80pxにする必要がある。ところがそうすると画像＋テキストのボックス幅合計が親要素の100%を超えてしまうので、この超えてしまった80px分をネガティブマージンで相殺することで親ボックス内に収めるようにしている。
最後に、ボックスの重なり順を調整するために画像ボックス側にz-index: 1を設定すれば完成。
@media screen and (min-width: 768px),print {
.alternate + .alternate {
margin-top: 80px; /* 後続ボックスとの余白を確保 */
}
/*ずらし用の指定*/
.alternate__body {
position: relative;
top: 40px; /* 元の位置を基準に単純に40px下にずらす */
width: calc(50% + 80px); /* あらかじめ80px分広げる */
}
.alternate__thumb {
position: relative;
z-index: 1;
}
.alternate._normal .alternate__body {
margin-left: -80px; /* ネガティブマージンで広げた分を相殺 */
padding-left: 110px; /* 重なり分の余白を確保 */
}
.alternate._reverse .alternate__body {
margin-right: -80px;
padding-right: 110px;
}
}