为什么负保证金不起作用？

Question

When you click 'Resume' some text comes in from the left. This is because I gave negative margin to the text initially.

But negative margin of intro_page gives no effect.

What I want is that:

1. When I click resume_page , text of resume should come in from left (this works) and text of intro_page should go out to the right (this doesn't work).

   Negative margin of intro_page doesn't seem to be working. Why is that?

2. Initially, page should be empty except the two links. Currently, intro_page page is shown. resume_page is hidden properly, as desired.

In short, everything about resume_page works perfectly. I want the exact same things to happen to intro_page

 function clicked_resume(OnScreen) { var resume = document.getElementById('resume_page'); if(OnScreen == 1) { resume.className = ''; clicked_about(0); } else if(OnScreen == 0) { resume.className = 'unseen'; } } function clicked_about(OnScreen) { var about = document.getElementById('intro_page'); if(OnScreen == 1) { about.className = ''; clicked_resume(0); } else if(OnScreen == 0) { about.className = 'unseen'; } } 

 #intro_page.unseen{ display: block; margin-right: -200px; } #intro_page{ margin-right: 0px; display: block; -webkit-transition: margin-right 1.5s ease-in; transition: margin-right 1.5s ease-in; } #resume_page.unseen{ display: block; margin-left: -600px; } #resume_page{ margin-left: 0px; display: block; -webkit-transition: margin-left 1.0s ease-in; transition: margin-left 1.0s ease-in; } 

  <h2 class="title_bar"> <ul> <li><span onclick = "clicked_about(1)">About</span></li> <li><span onclick="clicked_resume(1)">Resume</span></li> </ul> </h2> <div id="intro_page" class="unseen"> <p id="intro_main_text"> I enjoy reading, swimming, jogging, painting and exploring. </p> <figure class="intro_pic1"> <img src="img/award.jpg" alt="Receiving Award" height="50" /> <figcaption>Award 2015</figcaption> </figure> </div> <div id="resume_page" class="unseen"> <p>My resume</p> </div> 

Answer 1

Try using position: relative and right instead of margin-right . It's more reliable since it doesn't take the element's position into account when positioning other elements, like margin does. For bonus points you could even use transform: translate instead of right .

 function clicked_resume(OnScreen) { var resume = document.getElementById('resume_page'); if(OnScreen == 1) { resume.className = ''; clicked_about(0); } else if(OnScreen == 0) { resume.className = 'unseen'; } } function clicked_about(OnScreen) { var about = document.getElementById('intro_page'); if(OnScreen == 1) { about.className = ''; clicked_resume(0); } else if(OnScreen == 0) { about.className = 'unseen'; } } 

 body { margin: 0; overflow-x: hidden; } #intro_page.unseen{ display: block; right: -100%; } #intro_page{ position: relative; right: 0px; display: block; -webkit-transition: right 1.5s ease-in; transition: right 1.5s ease-in; } #resume_page.unseen{ display: block; left: -600px; } #resume_page{ position: relative; left: 0px; display: block; -webkit-transition: left 1.0s ease-in; transition: left 1.0s ease-in; } 

 <h2 class="title_bar"> <ul> <li><span onclick = "clicked_about(1)">About</span></li> <li><span onclick="clicked_resume(1)">Resume</span></li> </ul> </h2> <div id="intro_page" class="unseen"> <p id="intro_main_text"> I enjoy reading, swimming, jogging, painting and exploring. </p> <figure class="intro_pic1"> <img src="img/award.jpg" alt="Receiving Award" height="50" /> <figcaption>Award 2015</figcaption> </figure> </div> <div id="resume_page" class="unseen"> <p>My resume</p> </div> 

Answer 2

The Reason is that in CSS the elements are laid from left to right, margin-right would never work as you wish.

Just Modifying your CSS like this, it will work as a charm.

 body {
   overflow:hidden
}

#intro_page.unseen{
    transform: translateX(120%);
    transition: transform 1s ease-in;
}
#intro_page{
    transform: translateX(0);
    transition: transform 1s ease-in;
}

#resume_page.unseen{
    transform: translateX(-100%);
    transition: transform 1s ease-in;
}

#resume_page{
    transform: translateX(0);
    transition: transform 1s ease-in;
}

Hint: for better performance in animation always use translations instead of position, margin, width...

http://jsfiddle.net/wgsy6ufx/1/

Answer 3

As you can read in this guide , left and right negative margins don't behave the same : negative margin-left pulls the styled element towards the left, while negative margin-right pulls the adjacent right element towards the styled element. It doesn't move the styled element itself.

If you want to achieve your output, use position: relative and the left property to position your intro div in the far right : see this fiddle .