javascript - 滑入 div 不会重排整个页面

Question

我目前有一个 javascript 生成多个 div(DOM 对象)，如果单击第一个 div，子菜单 div 就会打开。这些子菜单使用 jQuery 幻灯片动画显示。

目前，当生成 div 时，它们会将当前存在的其余 div 推低。我希望它们与文档中的其他 div 重叠。

这是我通过生成 javascript 的 DOM 生成的代码:

<div class="de"></div> //"de" divs are divs that when you click them, the summon their corresponding "ds" div.
<div id="8" class="ds" style="display: block;"></div>
<div class="de"></div>
<div id="10" class="ds" style="display: block;"></div>

目前，如果我点击“de”div，整个页面必须重排，造成速度下降。我宁愿让它们与现有内容重叠。

我该怎么做？我可以将它们滑过现有内容吗？这是我当前的 CSS:

.de{
    float: left;
    width: 100%;
    min-width: 895px;
    height: 50px;
    text-align: center;
    z-index: 1;
    border:solid 1px #19365D;
    border-top:hidden 0px #19365D;
    border-left:hidden 0px #19365D;
    border-bottom:hidden 0px #19365D;
    background-image:url('images/TableDegrad.png');
    background-repeat:repeat-x;
}
.ds{
    position: relative;
    float: left;
    width: 98%;
    min-width: 825px;
    height: 120px;
    text-align: left;
    z-index: 2;
    display:none;
    border:solid 1px #19365D;
    background-image:url('images/TableExpends.png');
    background-repeat:repeat-x;
    margin-left:0.5%;
    margin-right:0.5%;
    padding-left:0.5%;
    padding-right:0.5%;
}

非常感谢您的宝贵时间，我将非常感谢您的帮助。

Answer 1

.de 很可能需要:

position:relative；

和.ds需要:

position: absolute; 
top: 50px;
left: 0;
z-index: 100;

.ds div 需要嵌套在 .de div 中，我的方法才能正常工作。这里的关键是绝对定位。如果您 float 所有这些元素，它将产生您提到的“重新流动”(四处移动)页面的效果。