margin-rightが効かない！？margin-leftは効く、どういうことなのか【HTML/CSS】
今日、タイトルそのまんまの事象が発生しました。
具体的には、トップページの一番上の背景画像を
jQueryを使ってスライドさせようとしたときです。
margin-rightを1000pxぐらいを初期値にして
margin-rightを0pxに減らしていけばスライドの挙動が
出来ると思いいざ実践。
結果は・・・
そもそもmargin-rightがつきませんでした。
ちなみにmargin-leftはつきます。
これはいったいどういうことなのでしょうか？
軽く調べてみました。
問題のコード
HTML
<section class="section01">
<div class="top-back toleftscroll"></div>
<div class="title-logo torightscroll"></div>
</section>CSS
.section01{
width: 100%;
position: relative;
}
.top-back{
position: absolute:
background: url(省略);
background-size: cover;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
.title-logo{
position: absolute;
background: url(省略);
z-index: 3;
}JS
$('.toleftscroll').css('margin-left', '2000px');
$('.torightscroll').css('margin-right', '2000px');
$('.toleftscroll').animate({'margin-left':'0px'},500);
$('.torightscroll').animate({'margin-right':'0px'},500);こんな感じ。
背景画像を右から左へ、
ロゴ画像を左から右へ動かしたいだけです。
前述したとおり、
margin-rightが効かないため、
背景画像のみ動き、
ロゴ画像は動きませんでした。
原因、解決法
親要素・子要素共に横幅を100％していることが問題でした。
まず要素は左詰めが基本。
なので
margin-leftは描画位置が変わるため効くんですが、
margin-rightは描画位置が変わらず、
marginは要素の外に逃げていく形になるので効かないようにみえているだけでした。
つまり解決法は・・・
横幅100％設計をやめればOK・・・
ってそんなの不便すぎるので、
素直にmarginを変更するのではなく、
topやleftを変更するようにしました。
まとめ
横幅100％設計でのmarginには気を付けよう！