現在のDivに対する相対的なマージン

私はマージンを編集してjQueryアニメーション効果を試しています。問題は、アニメーションエフェクトを使用しているときに、ページ上のコンテンツの大部分を保持するdiv内にあることです。。私は編集はそれがでだのdivを実際のページへの相対なってしまう、といないよ。ここマージンは一例です：現在のDivに対する相対的なマージン

<html> 
<head> 

<script src="javascript/jQuery-1.7.1.min.js" type="text/javascript"></script> 

<style type="text/css"> 

#maincontent{ 
padding-bottom: 3em; 
width: auto; 
background:#fff; 
text-align: left; 
margin-left: 10%; 
margin-right: 10%; 
margin-top: 60px; 
} 

#animateBox 
{ 
height: 100px; 
width: 100px; 
background: red; 
position: absolute; 
} 

#moveLeft 
{ 
display: none; 
} 

#moveRight 
{ 
display: inline; 
} 

</style> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#moveRight').click(function() { 
     $("#animateBox").animate(
      {"left": "+=200px"},"normal"); 
      $('#moveRight').css('display', 'none'); 
      $('#moveLeft').css('display', 'inline'); 
    }); 

    $("#moveLeft").click(function() { 
     $("#animateBox").animate(
      {"left": "-=200px"}, 
      "normal"); 
      $('#moveLeft').css('display', 'none'); 
      $('#moveRight').css('display', 'inline'); 

    }); 
}); 

</script> 

</head> 
<body> 

<div id="maincontent"> 

<div id="animateBox"></div> 

<br /> 
<br /> 
<br /> 
<br /> 
<br /> 

<input type="button" id="moveRight" Value="Move Right" style="width: 100px"> 
<input type="button" id="moveLeft" Value="Move Left" style="width: 100px"> 

</div> 
</body>

は、この問題を解決するためにそこにどのような方法か？ありがとう。

出典

2012-02-26 Jack Davis

アニメーションボックスからボタンを離したいのですか？ – uday

私は上記のコードからの疑問を、http://jsfiddle.net/G5H3T/、実際には得られませんでした。今問題は何ですか？ –

必要な状態をクリアにしてください。 – uday

.maincontentをpositionに設定するには、relative in css。

#maincontent{ 
padding-bottom: 3em; 
width: auto; 
background:#fff; 
text-align: left; 
margin-left: 10%; 
margin-right: 10%; 
margin-top: 60px; 
position:relative /*Add this*/ 
}

出典

2012-02-26 07:16:58 Abhidev

ありがとう、それはうまくいくようです。しかし、これ以外に何が変わるでしょうか？私はこれが他の予期せぬ問題を引き起こさないことを望んでいる、私のウェブページのすべてがメインコンテンツ部門のすべてのコンテンツを持っているという感覚。 –

いいえ、心配する必要はありません... .maincontent div内の絶対配置されたものは、ページではなくメインコンテンツdivに相対的に配置されます。 – Abhidev

@JackDavis http://www.barelyfitz.com/screencast/html-training/css/positioning/ –

現在のDivに対する相対的なマージン

答えて

関連する問題