Question

I asked a similar question about a week ago, except now I’m having a different problem.
Previously, I was trying to get dynamic jQuery tabs to appear in front of the navigation bar on my website. The dynamic tabs contain user objects such as: “User Control Panel” and “Quick Links”.

Anyway, using the “z” coordinate available in CSS I was able to position the tabs (pre and post minimization) in front of the navigation menu (and the rest of the website too). However, I’m having a different problem now. The tabs are in a row on the side of the webpage like this:

                                                                             T
                                                                             A
                                                                             B
                                                                             1

                                                                             T
                                                                             A
                                                                             B
                                                                             2

                                                                             T
                                                                             A
                                                                             B
                                                                             3

                                                                             T
                                                                             A
                                                                             B
                                                                             4

Everything works fine, except when I click on one of the tabs, the box with the data comes out of the side panel (as it should) and takes up the space along the side and pushes the other tabs down. I’d like to make the tabs stay in place and the box to come out anyways. This is what it does now:

                                                                             T
                                                                             A                                                                                                     
                                                                             B
                                                                             1
_____________________________________________________________________________
|
|
|
|
|
|
|
|
|
|
|
|
|
|
----------------------------------------------------------------------------
                                                                             T
                                                                             A
                                                                             B
                                                                             2

                                                                             T
                                                                             A
                                                                             B
                                                                             3

                                                                             T
                                                                             A
                                                                             B
                                                                             4

Code:
http://jsfiddle.net/hLLPL/

Answer 1

As I suggested in my comment, here is the working example on updated fiddle.

What I did

1. Put all the static class divs inside a parent div. (P.S. I changed the classes to suit my own coding paradigm.

   <div class="static">
     <div style="background:url('assets/img/tab_ucp.png');" id="static1" class="stat"></div>
     <div style="background:url('assets/img/tab_aqa.png');" id="static2" class="stat"></div>
     <div style="background:url('assets/img/tab_cr.png');" id="static3" class="stat"></div>
     <div style="background:url('assets/img/tab_ql.png');" id="static4" class="stat"></div>
   </div>
   

2. Assign this CSS to the parent div.

   .static {
     position: absolute;
     top: 0px;
     right: 0px;
   }