Javascript Jquery幻灯片搞乱了其他div'；s

我在jquery幻灯片中遇到了一个视觉问题，现在我已经准备好了一段代码片段，可以向您展示这个问题

现在，当我点击Wrapper3标题下拉Wrapper3信息时，它会向下推3个焊盘形状

我的问题是，2个包装器现在在垫子附近，但它仍然把它们往下推

我正在寻找帮助，以便在单击包装器3头部时保持3个焊盘形状

如果运行代码段，您将看到我的意思，只需单击ChooseMemoryStyle div

$（文档）.ready（函数（）{
$（“#wrapper3head”）。单击（函数（）{
$（“#包装3”）。滑动切换（“快速”）；
});
});
$（文档）.ready（函数（）{
$（“#信息头”）。单击（函数（）{
$（“#信息”）。滑动切换（“快速”）；
});
});
.wrapper{
位置：相对位置；
宽度：1000px；
保证金：0自动；
边框：5px槽#8E2B2B；
边界半径：15px；
}
.wrapper 2{
位置：相对位置；
宽度：652px；
保证金：0自动；
边框：5px槽#8E2B2B；
边界半径：15px；
}
.Wrapper3头{
位置：相对位置；
宽度：200px；
保证金：0自动；
边框：5px槽#8E2B2B；
边界半径：15px；
文本对齐：居中；
浮动：对；
保证金权利：1%；
}
.包装纸3{
位置：相对位置；
宽度：185px；
保证金：0自动；
显示：无；
边框：5px槽#8E2B2B；
文本对齐：居中；
浮动：对；
保证金权利：1%；
}
.资讯中心{
位置：相对位置；
宽度：652px；
保证金：0自动；
边框：5px槽#8E2B2B；
边界半径：15px；
文本对齐：居中；
}
.信息{
位置：相对位置；
宽度：635px；
保证金：0自动；
显示：无；
边框：5px槽#8E2B2B；
文本对齐：居中；
}
.回来{
位置：相对位置；
宽度：648px；
高度：648px；
z指数：0；
背景色：#000；
边框：3.5px脊白色；
边界半径：310px；
}
.pad{
宽度：300px；
高度：300px；
浮动：左；
z指数：1；
利润率：10px；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=60）”；
过滤器：α（不透明度=60）；
不透明度：0.6；
}
.形状1{
边框左上半径：300px；
背景颜色：绿色；
边框：2.5px槽白色；
}
.shape2{
浮动：左；
边框右上角半径：300px；
背景色：红色；
清楚:对,；
边框：2.5px槽白色；
位置：相对位置；
}
.形状3{
浮动：左；
边框左下半径：300px；
背景颜色：黄色；
清除：左；
边框：2.5px槽白色；
}
.形状4{
浮动：左；
边框右下半径：300px；
背景颜色：蓝色；
边框：2.5px槽白色；
}
.计时器{
位置：绝对位置；
顶部：195px；
左：195px；
宽度：250px；
高度：250px；
背景：#000；
边界半径：125px；
边框：2.5px纯白；
z指数：10；
}





问询处
你好

选择你的记忆方式




你想要声音吗

对
你想要闪光灯吗

对
你要发短信吗

对










单击“开始”时开始计时

之所以发生这种情况，是因为下拉列表有一个相对的位置。您需要给它一个
绝对位置
，以便它打开后不会影响页面上的任何其他元素。将此CSS添加到样式表将解决此问题：

.wrapper3 {
     position: absolute;
     right: 0px;
}


这是一个有效的演示：


$（文档）.ready（函数（）{
$（“#wrapper3head”）。单击（函数（）{
$（“#包装3”）。滑动切换（“快速”）；
});
});
$（文档）.ready（函数（）{
$（“#信息头”）。单击（函数（）{
$（“#信息”）。滑动切换（“快速”）；
});
});
.wrapper{
位置：相对位置；
宽度：1000px；
保证金：0自动；
边框：5px槽#8E2B2B；
边界半径：15px；
}
.wrapper 2{
位置：相对位置；
宽度：652px；
保证金：0自动；
边框：5px槽#8E2B2B；
边界半径：15px；
}
.Wrapper3头{
位置：相对位置；
宽度：200px；
保证金：0自动；
边框：5px槽#8E2B2B；
边界半径：15px；
文本对齐：居中；
浮动：对；
保证金权利：1%；
}
.包装纸3{
位置：绝对位置；
右：0px；
宽度：185px；
保证金：0自动；
显示：无；
边框：5px槽#8E2B2B；
文本对齐：居中；
浮动：对；
保证金权利：1%；
}
.资讯中心{
位置：相对位置；
宽度：652px；
保证金：0自动；
边框：5px槽#8E2B2B；
边界半径：15px；
文本对齐：居中；
}
.信息{
位置：相对位置；
宽度：635px；
保证金：0自动；
显示：无；
边框：5px槽#8E2B2B；
文本对齐：居中；
}
.回来{
位置：相对位置；
宽度：648px；
高度：648px；
z指数：0；
背景色：#000；
边框：3.5px脊白色；
边界半径：310px；
}
.pad{
宽度：300px；
高度：300px；
浮动：左；
z指数：1；
利润率：10px；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=60）”；
过滤器：α（不透明度=60）；
不透明度：0.6；
}
.形状1{
边框左上半径：300px；
背景颜色：绿色；
边框：2.5px槽白色；
}
.shape2{
浮动：左；
边框右上角半径：300px；
背景色：红色；
清楚:对,；
边框：2.5px槽白色；
位置：相对位置；
}
.形状3{
浮动：左；
边框左下半径：300px；
背景颜色：黄色；
清除：左；
边框：2.5px槽白色；
}
.形状4{
浮动：左；
边框右下半径：300px；
背景颜色：蓝色；
边框：2.5px槽白色；
}
.计时器{
位置：绝对位置；
顶部：195px；
左：195px；
宽度：250px；
高度：250px；
背景：#000；
边界半径：125px；
边框：2.5px纯白；
z指数：10；
}





问询处
你好

选择你的记忆方式




你想要声音吗