현재 div에 상대적인 여백

그래서 마진을 편집하여 jQuery 애니메이션 효과를 시험해 보겠습니다. 문제는 애니메이션 효과를 사용할 때 페이지에있는 대부분의 내용을 담고있는 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

animatebox에서 단추를 이동 하시겠습니까? – uday

나는 위의 코드에서 http://jsfiddle.net/G5H3T/라는 질문을 얻지 못했습니다. 이제 문제는 무엇입니까? –

필요한 것을 깨끗하게 처리하십시오. – uday

위치에 : .maincontent를 설정하려면 : 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

감사합니다. 작동하는 것처럼 보였습니다. 그러나 그 밖의 무엇이이 변화를 할 것입니까? 나는 이것이 다른 예기치 않은 문제를 일으키지 않기를 바라고 있습니다. 모든 웹 페이지에는 주 콘텐츠 div의 모든 콘텐츠가 있습니다. –

걱정하지 않아도됩니다 ... .maincontent div 안에 절대 위치가 지정된 항목은 이제 주 콘텐츠 div가 아닌 페이지에 상대적으로 배치됩니다. – Abhidev

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

현재 div에 상대적인 여백

답변

관련 문제