javascript - jQuery滑块的CSS边距问题

Question

我对嵌入到轮播中的背景图像有疑问。单击此处我注意到，当我从一张幻灯片单击到另一张幻灯片时，我网站上的背景图片会移动到不合适的位置。我的轮播的边缘顶部当前设置为margin-top:-275px;，背景图像设置为margin-top:-64px;我有点担心这些设置。

有没有人可以解决这个问题？

要激活幻灯片，请单击导航栏下的红色细选项卡

Answer 1

我想那是因为你有

.rslides li {
  top:0;
}

它对position:relative（并且当前幻灯片有）没有任何作用，但它使用position:absolute（隐藏的幻灯片）向下移动幻灯片。

当您单击一个选项卡时，有一段时间新选项卡会淡入，但还position:relative没有。然后，在那一刻，新幻灯片不在您想要的位置。

所以删除那条线。

Answer 2

发生跳跃是因为您在动画切换结束时将LI项目从切换position: absolute;到。position: relative;这可以通过删除您的 CSS 规则来避免：

.rslides li { left: 0; top: 0; }

指定widthandheight很好，但是一旦你指定leftand top- 然后从相对定位切换到绝对定位，你就会看到你所看到的跳跃。

至于每个面板的定位 - 它与您布置盒子的方式有关。您指定的尺寸对于您提供的内容来说不够大。例如：<div id="header">是37px高，这是社交媒体按钮的合适大小，但您也可以将它作为容器#nav-menu UL- 这是另一个102px高。

看来，为了纠正这一点并使事情重叠，您正在使用负边距 - 这让您都被抛弃了。

我的建议是使用标准化的布局系统，例如以下任何一种：

• http://cssgrid.net/
• http://960.gs/
• http://www.1kbgrid.com/
• http://foundation.zurb.com/docs/grid.php

并使用它来执行您的布局任务，而不是尝试使用混合绝对/相对定位自行制作重叠图层。

或者，如果您要走重叠层路线（同样，不建议），请真正承诺。在整个布局中绝对定位事物。

为了实现这一点，您可能会考虑 CSS 规则，例如：

#header {
    display: block;
    position: absolute;

    left: 50%; top: 0px;
    height: 139px; /* Your Social media links height + nav buttons height */
    width: 1018px; /* Your current width */
    margin-left: -509px; /* Half the width - centers on page */
}

再一次 - 这是更多的工作，更难维护并且更不优雅 - 但至少会给你带来一致的间距/尺寸。