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

正如我在评论中所建议的，这里是更新小提琴的工作示例。

我做了什么

1. 把所有的静态类div放在一个父类中div。（PS 我改变了类以适应我自己的编码范式。

   <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 分配给 parent div。

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