javascript - 如何让一个div不移动另一个

Question

大约一周前我问过类似的问题，但现在我遇到了不同的问题。
以前，我试图让动态 jQuery 选项卡出现在我网站的导航栏前面。动态选项卡包含用户对象，例如:“用户控制面板”和“快速链接”。

无论如何，使用 CSS 中可用的“z”坐标，我能够将选项卡(最小化前后)定位在导航菜单(以及网站的其余部分)前面。但是，我现在遇到了一个不同的问题。选项卡在网页的一侧排成一行，如下所示:

                                                                             T
                                                                             A
                                                                             B
                                                                             1

                                                                             T
                                                                             A
                                                                             B
                                                                             2

                                                                             T
                                                                             A
                                                                             B
                                                                             3

                                                                             T
                                                                             A
                                                                             B
                                                                             4

一切正常，除了当我单击其中一个选项卡时，带有数据的框从侧面板中出来(它应该如此)并占用侧面的空间并将其他选项卡向下推。我想让标签留在原位，而盒子无论如何都会出来。这是它现在所做的:

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

                                                                             T
                                                                             A
                                                                             B
                                                                             3

                                                                             T
                                                                             A
                                                                             B
                                                                             4

代码: http://jsfiddle.net/hLLPL/

Answer 1

正如我在 comment 中所建议的那样，这是更新后的工作示例 fiddle .

我做了什么

1. 将所有静态类 div 放在父级 div 中。 (P.S. 我更改了类以适合我自己的编码范例。

   <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. 将此 CSS 分配给父 div。

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