css left help jquery

ok so basically I have a setup like this:

<div id="tabs">
    <div id="tab_one">
   开发者_Go百科     Something here
    </div>

    <div id="tab_two">
        Something else here
    </div>

    <div id="tab_three">
        Another thing here
    </div>
</div>

Now my css looks like this:

#tab_one {
    position:relative;
    left:0px;
    top:0px;
}
#tab_two {
    position:relative;
    left:5000px;
}
#tab_three {
    position:relative;
    left:5000px;
}

so basically what I am doing here is only showing tab_one. Then when a user clicks tab_two it changes tab_two to left:0px; and changes tab_one to left:5000px; (so it just switches the the property). The problem is because its relative it is going below the height of the tab that was before it. So if tab_one's height is 50px then tab_two's top will be 50px. I need it to be 0px. It works if I set it to absolute and then back to relative but that is not possible for the project that I am working on because it reloads the tab which I do not want to happen. Any help in figuring out how to overlap or make it 0 instead of 50 would be greatly appreciated.

It looks like you have you may have your position absolute and position relative mixed up... check out this great tutorial on CSS positioning.

That being said, I threw together this example for you to look at (working here).

CSS

.tabs {
 position: relative;
 left: 0;
 top: 0;
}
.info {
 position: absolute;
 left: -5000px;
 top: 25px;
}
.active {
 position: absolute;
 top: 25px;
 left: 0;
}

HTML

<div class="tabs">
 <a href="#tab_one">Tab 1</a>
 <a href="#tab_two">Tab 2</a>
 <a href="#tab_three">Tab 3</a>

 <div>
  <div id="tab_one" class="info">
   Something here
  </div>

  <div id="tab_two" class="info">
   Something else here
  </div>

  <div id="tab_three" class="info">
   Another thing here
  </div>
</div>

Script

$(document).ready(function(){
 // select first tab, get ID
 var tmp = $('.tabs a:eq(0)').attr('href');
 $(tmp).removeClass('info').addClass('active');

 // tab display
 $('.tabs a').click(function(){
  $('.tabs div > div').removeClass('active').addClass('info');
  $( $(this).attr('href') ).addClass('active');
  return false;
 })
})

EDIT: Opps the ".tabs a" CSS in the pastebin code was left over from when I started out with each tab as a div... it doesn't do anything, so you can ignore it LOL.

Instead of using offsets, you can hide/show the tabs with the display property. Add the "tab" class to the tab containers:

<div id="tabs">
    <div id="tab_one" class="tab">
        Something here
    </div>

    <div id="tab_two" class="tab">
        Something else here
    </div>

    <div id="tab_three" class="tab">
        Another thing here
    </div>
</div>

And the stylesheet is:

.tab { display: none } /* Don't render by default */

.show_tab_one #tab_one,
.show_tab_two #tab_two,
.show_tab_three #tab_three { display: block } /* Selectively render */

All you have to do is to set the class of the #tabs element to one of "show_tab_one", "show_tab_two" or "show_tab_three". Of course, if you have a dynamic number of tabs with dynamic ids, this solution won't work for you.